<template>
  <div class="datav-page">
    <!-- 使用grid布局 -->
    <!-- 四周装饰边框 由于周边会显示白色边框暂时不显示装饰边框效果-->
    <!-- <dv-border-box-1 class="fullViewBg"></dv-border-box-1> -->
    <!-- <div class="fullViewBg"> <dv-border-box-1></dv-border-box-1></div> -->
    <!-- 导航栏 -->
    <a-space class="navigatorBar">
      <div class="link-wrap">
        <div class="item" @click="onNavigatorBarItemClick('/board/index')">管理后台 </div>
      </div>
    </a-space>
    <!-- 系统标题文字 -->
    <div class="systemTitle">
      <!-- 水文安全生产数字化系统监控台 -->
      <dv-decoration-7
        >{{
          frontAreaState.showInSystemTitleObjectName
        }}
        水文安全生产数字化系统监控台</dv-decoration-7
      >
    </div>
    <!-- 当前日期时间 -->
    <div class="nowTime">
      <span>{{ currentDate }} {{ currentTime }} {{ currentWeek }}</span>
    </div>
    <!-- 全屏控制 -->
    <div class="fullScreenControl">
      <span style="color: #5cd9e8; cursor: pointer" v-show="!isFullscreen" @click="enter">
        <FullscreenOutlined />
      </span>
      <span style="color: #5cd9e8; cursor: pointer" v-show="isFullscreen" @click="exit">
        <FullscreenExitOutlined />
      </span>
    </div>
    <!-- 使用grid布局的地图容器（作为底图显示） -->
    <div class="fullViewContainer" ref="echartsMap3dContainerRef"> </div>
    <!-- 地图工具栏和图层控制条，显示在页面底部居中显示 -->
    <a-space class="area area-center-bottom">
      <!-- 重置地图按钮 -->
      <Tooltip placement="top" title="重置地图">
        <a-button shape="circle" @click="onResetMapButtonClick()">
          <HomeOutlined />
        </a-button>
      </Tooltip>
      <!-- 调整视角按钮 -->
      <Tooltip placement="top" title="3D地图效果">
        <a-button
          shape="circle"
          :type="mapLayerOptions.mapViewControlAlpha < 90 ? 'primary' : 'default'"
          @click="onChangeMapViewControlButtonClick()"
        >
          <CodepenOutlined />
        </a-button>
      </Tooltip>
      <!-- 行政区划图层显隐控制 -->
      <Tooltip placement="top" title="行政区划名称">
        <a-button
          shape="circle"
          :type="mapLayerOptions.showAdname === true ? 'primary' : 'default'"
          @click="onMapShowAdnameButtonClick()"
          ><EnvironmentOutlined /></a-button
      ></Tooltip>
      <!-- 单元图层显隐控制 -->
      <Tooltip placement="top" title="单元">
        <a-button
          shape="circle"
          :type="mapLayerOptions.showUnitLayer === true ? 'primary' : 'default'"
          @click="onMapUnitLayerButtonClick()"
          ><BuildOutlined /></a-button
      ></Tooltip>
      <!-- 危险源图层显隐控制 -->
      <Tooltip placement="top" title="危险源">
        <a-button
          shape="circle"
          :type="mapLayerOptions.showHazardLayer === true ? 'primary' : 'default'"
          @click="onMapHazardLayerButtonClick()"
          ><WarningOutlined /></a-button
      ></Tooltip>
      <!-- 隐患图层显隐控制 -->
      <Tooltip placement="top" title="隐患">
        <a-button
          shape="circle"
          :type="mapLayerOptions.showTroubleLayer === true ? 'primary' : 'default'"
          @click="onMapTroubleLayerButtonClick()"
          ><BugOutlined /> </a-button
      ></Tooltip>
      <!-- 任务图层显隐控制 -->
      <Tooltip placement="top" title="安全生产任务">
        <a-button
          shape="circle"
          :type="mapLayerOptions.showTaskLayer === true ? 'primary' : 'default'"
          @click="onMapTaskLayerButtonClick()"
          ><CarryOutOutlined /> </a-button
      ></Tooltip>
      <!-- 人员分布图层显隐控制 -->
      <Tooltip placement="top" title="人员分布">
        <a-button
          shape="circle"
          :type="mapLayerOptions.showStaffLayer === true ? 'primary' : 'default'"
          @click="onMapStaffLayerButtonClick()"
        >
          <UserOutlined /></a-button
      ></Tooltip>
      <!-- 摄像头图层显隐控制 -->
      <Tooltip placement="top" title="安全监控摄像头">
        <a-button
          :type="mapLayerOptions.showCameraLayer === true ? 'primary' : 'default'"
          shape="circle"
          @click="onMapCameraLayerButtonClick()"
        >
          <VideoCameraOutlined /> </a-button
      ></Tooltip>
      <!-- AI对话窗口控制 -->
      <Tooltip placement="top" title="DeepSeek AI 知识库智能助手">
        <a-button shape="circle" @click="onAIChatButtonClick()"> <CommentOutlined /> </a-button
      ></Tooltip>
      <!-- 任务图层显隐控制，可以按任务类型细分控制显隐 -->
      <!-- <a-dropdown>
        <template #overlay>
          <a-menu @click="onMapTaskLayerMenuClick">
            <a-menu-item key="1">全部任务</a-menu-item>
            <a-menu-item key="2">安全自查</a-menu-item>
            <a-menu-item key="3">督查检查</a-menu-item>
            <a-menu-item key="4">设备维护保养</a-menu-item>
            <a-menu-item key="5">作业活动</a-menu-item>
          </a-menu>
        </template>
        <a-button>
          安全生产任务
          <DownOutlined />
        </a-button>
      </a-dropdown> -->
      <!-- 开发测试按钮 -->
      <!-- <a-button danger @click="onMapTestButtonClick()"> 地图测试功能 </a-button> -->
      <!-- <a-button type="primary" @click="onBackToChinaButtonClick()"> 返回全国地图 </a-button> -->
    </a-space>
    <!-- 叠加在底图之上的顶部中间信息显示区域，叠加的区域整体需要使用v-if控制显隐以避免出现遮挡底部图层 -->
    <div
      class="area area-center-top"
      v-if="
        frontAreaState.showTopCenter === true &&
        (frontAreaState.showOrgInfo === true || frontAreaState.showUnitInfo === true)
      "
    >
      <!-- 配合使用grid布局，区域中的元素保持与grid中划分的行列一致即可，不需要设置布局样式 -->
      <!-- 根据风险预警值的数值显示不同颜色 -->
      <div
        v-if="orgOrUnitLatestStatus.risk < 40"
        class="area-single-quota"
        style="background-color: rgba(0, 255, 255, 0.5); color: #00ffff"
      >
        <div class="label">风险预警值</div>
        <div class="value"><ThunderboltOutlined />&nbsp;{{ orgOrUnitLatestStatus.risk }}</div>
      </div>
      <div
        v-if="orgOrUnitLatestStatus.risk >= 40 && orgOrUnitLatestStatus.risk < 60"
        class="area-single-quota"
        style="background-color: rgba(31, 31, 20, 0.9); color: #b2b34d"
      >
        <div class="label">风险预警值</div>
        <div class="value"><ThunderboltOutlined />&nbsp;{{ orgOrUnitLatestStatus.risk }}</div>
      </div>
      <div
        v-if="orgOrUnitLatestStatus.risk >= 60 && orgOrUnitLatestStatus.risk < 80"
        class="area-single-quota"
        style="background-color: rgba(255, 228, 196, 0.9); color: #ce6c21"
      >
        <div class="label">风险预警值</div>
        <div class="value"><ThunderboltOutlined />&nbsp;{{ orgOrUnitLatestStatus.risk }}</div>
      </div>
      <div
        v-if="orgOrUnitLatestStatus.risk >= 80"
        class="area-single-quota"
        style="background-color: rgba(31, 20, 20, 0.9); color: #c27070"
      >
        <div class="label">风险预警值</div>
        <div class="value"><ThunderboltOutlined />&nbsp;{{ orgOrUnitLatestStatus.risk }}</div>
      </div>
      <!-- 显示危险源和隐患数量，不根据数量多少显示不同颜色 -->
      <div class="area-single-quota" style="background-color: rgba(5, 25, 46, 0.8); color: #75d1f0">
        <div class="label">危险源数量</div>
        <div class="value"
          ><WarningOutlined />&nbsp;{{ orgOrUnitLatestStatus.hazard.count }}</div
        ></div
      >
      <!-- 如果重大危险源数量＞n颜色使用风险预警值40~60颜色 -->
      <div
        v-if="orgOrUnitLatestStatus.hazard.majorcount > 0"
        class="area-single-quota"
        style="background-color: rgba(31, 31, 20, 0.9); color: #b2b34d"
      >
        <div class="label">重大危险源数量</div>
        <div class="value"
          ><WarningOutlined />&nbsp;{{ orgOrUnitLatestStatus.hazard.majorcount }}</div
        ></div
      >
      <div
        v-else
        class="area-single-quota"
        style="background-color: rgba(0, 255, 255, 0.5); color: #00ffff"
      >
        <div class="label">重大危险源数量</div>
        <div class="value"
          ><WarningOutlined />&nbsp;{{ orgOrUnitLatestStatus.hazard.majorcount }}</div
        ></div
      >
      <!-- 如果隐患数量＞n颜色使用风险预警值60~80颜色 -->
      <div
        v-if="orgOrUnitLatestStatus.trouble.count > 0"
        class="area-single-quota"
        style="background-color: rgba(255, 228, 196, 0.9); color: #ce6c21"
      >
        <div class="label">隐患数量</div>
        <div class="value"><BugOutlined />&nbsp;{{ orgOrUnitLatestStatus.trouble.count }}</div></div
      >
      <div
        v-else
        class="area-single-quota"
        style="background-color: rgba(0, 255, 255, 0.5); color: #00ffff"
      >
        <div class="label">隐患数量</div>
        <div class="value"><BugOutlined />&nbsp;{{ orgOrUnitLatestStatus.trouble.count }}</div></div
      >
    </div>
    <!-- 叠加在底图之上的底部倒数一行中间信息显示区域，叠加的区域整体需要使用v-if控制显隐以避免出现遮挡底部图层 -->
    <!-- <div class="area area-center-bottom-22" v-if="frontAreaState.showBottomCenter === true"> </div> -->
    <a-space
      class="area area-center-bottom-22"
      v-if="frontAreaState.showBottomCenter === true && frontAreaState.showUnitInfo === true"
    >
      <!-- 如果单元有全景图，生成全景图的查看按钮 -->
      <a-button
        v-for="(item, index) in unit.panoramastaticinfos"
        @click="
          onViewUnitPanoramaButtonClick(
            item.title,
            JSON.parse(item.content).id,
            JSON.parse(item.content).url,
          )
        "
        ><GlobalOutlined />{{ item.title }}</a-button
      >
      <!-- 如果单元有视频静态信息，生成视频的查看按钮 -->
      <a-button
        v-for="(item, index) in unit.videostaticinfos"
        @click="
          onViewUnitVideoStaticInfoButtonClick(
            item.title,
            JSON.parse(item.content).id,
            JSON.parse(item.content).url,
          )
        "
        ><PlayCircleOutlined />{{ item.title }}</a-button
      >
    </a-space>
    <!-- 叠加在底图之上的左侧信息显示区域，叠加的区域整体需要使用v-if控制显隐以避免出现遮挡底部图层 -->
    <!-- 在单元图层点击单元时，左侧区域显示指定单元的介绍信息、图片轮播、文字轮播信息 -->
    <div
      class="area area-left"
      v-if="frontAreaState.showLeftSide === true && frontAreaState.showUnitInfo === true"
    >
      <!-- 显示指定单元的名称和介绍文字信息 -->
      <div class="area-box-border">
        <UnitBasicInfoView :key="mapLayerOptions.selectedObjectId" :unit="unit.basicinfo" />
      </div>
      <!-- 显示指定单元的图片静态信息集合 -->
      <div class="area-box-border">
        <ImageSwiper
          :key="mapLayerOptions.selectedObjectId"
          :unit="unit.textstaticinfos"
          :image-items="unit.imagestaticinfos"
          objectFit="cover"
        />
      </div>
      <!-- 显示指定单元的文字静态信息集合 -->
      <div class="area-box-border">
        <TextSwiper
          :key="mapLayerOptions.selectedObjectId"
          :textItems="unit.textstaticinfos"
          title-font-size="1.4rem"
          title-font-weight="bold"
          title-color="#75d1f0"
          content-font-size="1rem"
          content-color="#75d1f0"
        />
      </div>
    </div>
    <!-- 在危险源图层点击单元时，左侧区域显示指定单元的危险源数量、一般/重大和各风险等级图表 -->
    <div
      class="area area-left"
      style="grid-area: 3 / 1 / 25 / 4"
      v-if="frontAreaState.showLeftSide === true && frontAreaState.showUnitHazardsInfo === true"
    >
      <!-- 显示单元的危险源数量 -->
      <div class="area-box-border"
        ><div
          class="area-single-quota"
          style="background-color: rgba(5, 25, 46, 0.8); color: #75d1f0; height: 50%"
        >
          <div class="label">危险源数量</div>
          <div class="value"
            ><WarningOutlined />&nbsp;{{ orgOrUnitLatestStatus.hazard.count }}</div
          ></div
        >
        <!-- 如果重大危险源数量＞n颜色使用风险预警值40~60颜色 -->
        <div
          v-if="orgOrUnitLatestStatus.hazard.majorcount > 0"
          class="area-single-quota"
          style="background-color: rgba(31, 31, 20, 0.9); color: #b2b34d; height: 50%"
        >
          <div class="label">重大危险源数量</div>
          <div class="value"
            ><WarningOutlined />&nbsp;{{ orgOrUnitLatestStatus.hazard.majorcount }}</div
          ></div
        >
        <div
          v-else
          class="area-single-quota"
          style="background-color: rgba(0, 255, 255, 0.5); color: #00ffff; height: 50%"
        >
          <div class="label">重大危险源数量</div>
          <div class="value"
            ><WarningOutlined />&nbsp;{{ orgOrUnitLatestStatus.hazard.majorcount }}</div
          ></div
        ></div
      >
      <!-- 中间空白，上下位置显示信息 -->
      <div></div>
      <!-- 显示单元的危险源各风险等级图表 -->
      <div class="area-box-border"
        ><Echarts :echartData="unit.hazardRiskLevelEchartsOption" :showLoading="false" /></div
    ></div>
    <!-- 在隐患图层点击单元时，左侧区域显示指定单元的隐患治理整改数量（总数、已整改数）、整改状态图表、隐患数量（总数、重大数）、各风险等级图表 -->
    <div
      class="area area-left"
      style="grid-area: 3 / 1 / 25 / 5; grid-template-rows: repeat(4, 1fr)"
      v-if="
        frontAreaState.showLeftSide === true && frontAreaState.showUnitHiddenTroublesInfo === true
      "
    >
      <!-- 显示单元的隐患治理整改数量（总数、已整改数） -->
      <div class="area-box-border"
        ><div
          class="area-single-quota"
          style="background-color: rgba(5, 25, 46, 0.8); color: #75d1f0; height: 50%"
        >
          <div class="label">本年隐患总数</div>
          <div class="value"><BugOutlined />&nbsp;{{ unit.troublecorrectStsInfo.count }}</div></div
        >
        <div
          class="area-single-quota"
          style="background-color: rgba(0, 255, 255, 0.5); color: #00ffff; height: 50%"
        >
          <div class="label">已整改完成数量</div>
          <!-- 已整改治理隐患数量=已整改+已验收 -->
          <div class="value"
            ><BugOutlined />&nbsp;{{
              unit.troublecorrectStsInfo.notCheckCount + unit.troublecorrectStsInfo.hasCheckCount
            }}</div
          ></div
        ></div
      >
      <!-- 显示单元的隐患整改状态图表 -->
      <div class="area-box-border"
        ><Echarts :echartData="unit.troublecorrectStatusEchartsOption" :showLoading="false"
      /></div>
      <!-- 显示单元的隐患数量（总数、重大数） -->
      <div class="area-box-border"
        ><div
          class="area-single-quota"
          style="background-color: rgba(5, 25, 46, 0.8); color: #75d1f0; height: 50%"
        >
          <div class="label">未完成整改数量</div>
          <div class="value"
            ><BugOutlined />&nbsp;{{ orgOrUnitLatestStatus.trouble.count }}</div
          ></div
        >
        <div
          class="area-single-quota"
          style="background-color: rgba(31, 31, 20, 0.9); color: #b2b34d; height: 50%"
        >
          <div class="label">重大隐患数量</div>
          <div class="value"
            ><BugOutlined />&nbsp;{{ orgOrUnitLatestStatus.trouble.majorcount }}</div
          ></div
        >
      </div>
      <!-- 显示单元的隐患各风险等级图表 -->
      <div class="area-box-border"
        ><Echarts :echartData="unit.troubleRiskLevelEchartsOption" :showLoading="false" /></div
    ></div>
    <!-- 叠加在底图之上的右侧信息显示区域，叠加的区域整体需要使用v-if控制显隐以避免出现遮挡底部图层 -->
    <!-- 在单元图层中点击单元时，右侧区域显示指定单元的任务图表、自查任务轮播表和隐患治理轮播表 -->
    <div
      class="area area-right"
      v-if="frontAreaState.showRightSide === true && frontAreaState.showUnitInfo === true"
    >
      <!-- 选定单元时右侧显示单元的任务信息：分为任务完成率、不同类型任务数量、任务滚动表、隐患 -->
      <!-- 可以使用Echarts饼图或环图显示任务完成率和隐患治理整改率，也可以使用card显示单元的任务、辨识危险源、风险评价等的次数 -->
      <div class="area-box-border"
        ><Echarts :echartData="unit.taskEchartsOption" :showLoading="false"
      /></div>
      <!-- 轮播表显示指定单元的安全生产自查任务 -->
      <dv-scroll-board class="area-box-border" :config="unit.checktaskitemScrollTableConfig" />
      <!-- 轮播表显示指定单元的隐患治理 -->
      <dv-scroll-board class="area-box-border" :config="unit.troublecorrectScrollTableConfig" />
      <!-- 显示的图表和表格均为封装的echarts组件，在ehs中不需要添加对应的页面或组件 -->
      <!-- <div style="position: relative; background-color: aliceblue"></div> -->
      <!-- <div style="position: relative; background-color: aqua"></div> -->
      <!-- <div style="position: relative; background-color: bisque"></div> -->
    </div>
    <!-- 在危险源图层中点击单元时，右侧区域显示指定单元的危险源轮播表、危险源辨识记录轮播表、危险源风险评价记录轮播表 -->
    <div
      class="area area-right"
      style="grid-area: 3 / 16 / 25 / 25"
      v-if="frontAreaState.showRightSide === true && frontAreaState.showUnitHazardsInfo === true"
    >
      <!-- 轮播表显示指定单元的危险源台账列表 -->
      <dv-scroll-board class="area-box-border" :config="unit.hazardScrollTableConfig" />
      <!-- 轮播表显示指定单元的危险源辨识记录 -->
      <dv-scroll-board class="area-box-border" :config="unit.hazardIdentifyScrollTableConfig" />
      <!-- 轮播表显示指定单元的风险评价记录 -->
      <dv-scroll-board class="area-box-border" :config="unit.riskEvaluationScrollTableConfig" />
    </div>
    <!-- 在隐患图层中点击单元时，右侧区域显示指定单元的隐患轮播表、隐患治理整改记录轮播表 -->
    <div
      class="area area-right"
      style="grid-area: 3 / 17 / 25 / 25"
      v-if="
        frontAreaState.showRightSide === true && frontAreaState.showUnitHiddenTroublesInfo === true
      "
    >
      <!-- 轮播表显示指定单元的隐患治理整改记录 -->
      <dv-scroll-board class="area-box-border" :config="unit.troublecorrectScrollTableConfig" />
      <!-- 轮播表显示指定单元的隐患台账列表 -->
      <dv-scroll-board class="area-box-border" :config="unit.hiddenTroubleScrollTableConfig" />
    </div>
    <!-- 在任务图层中点击单元时，右侧区域显示指定单元的任务图表、任务轮播表 -->
    <div
      class="area area-right"
      v-if="frontAreaState.showRightSide === true && frontAreaState.showUnitTaskInfo === true"
    >
      <!-- 选定单元时右侧显示单元的任务信息：分为任务完成率、不同类型任务数量、任务滚动表、隐患 -->
      <!-- 可以使用Echarts饼图或环图显示任务完成率和隐患治理整改率，也可以使用card显示单元的任务、辨识危险源、风险评价等的次数 -->
      <div class="area-box-border"
        ><Echarts :echartData="unit.taskEchartsOption" :showLoading="false"
      /></div>
      <!-- 轮播表显示指定单元的所有类型任务 -->
      <dv-scroll-board class="area-box-border" :config="unit.taskitemScrollTableConfig" />
    </div>
    <!-- 弹出窗口的显示信息，弹出显示单元指定的全景图 ；实测发现即使使用v-if在dom中也没有移除该div导致遮挡其他内容-->
    <!-- <div v-if="frontAreaState.showPopupArea === true" class="area area-popup-center">
    </div> -->
    <!-- 弹出窗口的显示信息，弹出在右下角显示AI对话框 ；实测发现即使使用v-if在dom中也没有移除该div导致遮挡其他内容-->
    <!-- <div v-if="frontAreaState.showPopupArea === true" class="area area-popup-right-bottom">
      <iframe
        style="width: 100%; height: 100%"
        src="https://lke.cloud.tencent.com/webim/#/chat/OnVqXX"
        frameborder="0"
      />
    </div> -->
    <!-- 弹出窗口查看单元的全景图 -->
    <UnitPanoramaViewModal @register="registerUnitPanoramaViewModal" />
    <!-- 弹出窗口查看单元的视频 -->
    <UnitVideoViewModal @register="registerUnitVideoViewModal" />
    <!-- 弹出窗口查看摄像头视频 -->
    <LivePlayerModal @register="registerLivePlayerModal" />
    <!-- 打开AI对话窗口 -->
    <ChatDrawer @register="registerAIChatDrawer" />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    unref,
    reactive,
    provide,
    computed,
    nextTick,
    onBeforeMount,
    onMounted,
    onUnmounted,
  } from 'vue';
  import { useFullscreen } from '@vueuse/core';
  import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
  // 按需引入datav的组件
  // Decoration11 在datav-vue3中暂时没有
  // import { BorderBox1, Decoration7 } from '@jiaminghi/data-view';

  import {
    DownOutlined,
    HomeOutlined,
    CodepenOutlined,
    EnvironmentOutlined,
    BuildOutlined,
    WarningOutlined,
    BugOutlined,
    CarryOutOutlined,
    UserOutlined,
    VideoCameraOutlined,
    CommentOutlined,
    ThunderboltOutlined,
    GlobalOutlined,
    PlayCircleOutlined,
    CloseOutlined,
  } from '@ant-design/icons-vue';
  import { Tooltip } from 'ant-design-vue';
  import type { MenuProps } from 'ant-design-vue';

  import { useUserStoreWithOut } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';

  import { useI18n } from '/@/hooks/web/useI18n';
  import moment from 'moment';

  import * as echarts from 'echarts';
  //需要引入echarts-gl扩展，否则map3D类型无法识别
  import 'echarts-gl';
  import _ from 'lodash';
  //引入axios用于读取本地geo的json文件或者从在线geo读取
  import axios from 'axios';

  import restRegionGeoJson from './testregion.json';

  import { useDrawer } from '/@/components/Drawer';
  import ChatDrawer from '/@/views/demo/ai/lke/ChatDrawer.vue';

  import { useMessage } from '/@/hooks/web/useMessage';
  const { createErrorModal, createMessage, notification } = useMessage();

  import { useGlobSetting } from '/@/hooks/setting';
  const { globalProjectCode, apiUrl, uploadUrl } = useGlobSetting();
  import { getImageFileApi } from '/@/api/platform/file';

  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { OperationTypeEnum } from '/@/enums/appEnum';

  import { getUserOrganization } from '/@/api/ehs/organization';
  import { EhsOrgDto } from '/@/api/ehs/model/organizationModel';

  //单元模型及接口
  import {
    EhsUnitDto,
    EhsUnitQueryConditionDto,
    EhsUnitStaticInfoDto,
  } from '/@/api/ehs/model/unitDivisionModel';
  import { queryUnitList, queryUnitStaticInfo } from '/@/api/ehs/unitDivision';
  //危险源模型及接口
  import {
    EhsHazardInfoDto,
    QueryOneUnitHazardResultDto,
    HazardIdentifyQueryConditionDto,
    HazardRiskEvaluationDto,
    HazardRiskEvaluationQueryConditionDto,
  } from '/@/api/ehs/model/hazardModel';
  import {
    getUnitHazards,
    getUnitHiddenTrouble,
    queryIdentifyRecordByUnit,
    queryUnitRiskEvaluationRecords,
  } from '/@/api/ehs/hazard';
  //看板数据模型及接口
  import {
    EhsBoardQueryConditionDto,
    EhsBoardOrgLatestStatusDTO,
    EhsBoardOrgQueryResultDto,
    EhsBoardUnitQueryConditionDto,
    EhsBoardUnitQueryResultDto,
    EhsBoardTaskQueryConditionDto,
    EhsBoardTaskQueryResultItemDto,
    EhsBoardOrgUnitHazardsQueryConditionDto,
    EhsBoardOrgUnitHazardsQueryResultItemDto,
  } from '/@/api/ehs/model/ehsBoardModel';
  import {
    getOrgLatestStatus,
    queryOrgEhsBoard,
    getUnitLatestStatus,
    queryUnitEhsBoardStatistics,
    stsEhsBoardOrgUnitsTaskCounts,
    stsEhsBoardOrgUnitsHazardCounts,
  } from '/@/api/ehs/ehsBoard';
  //隐患治理模型及接口
  import {
    EhsTroubleCorrectQueryConditionDto,
    EhsTroubleCorrectInfoDto,
  } from '/@/api/ehs/model/troublecorrectModel';
  import { queryEhsTroubleCorrectList } from '/@/api/ehs/troublecorrect';
  //任务模型及接口
  import {
    TaskConsoleUnitTaskItemQueryConditionDto,
    TaskConsoleQueryResultDto,
  } from '/@/api/ehs/model/taskConsoleModel';
  import { queryUnitTaskItem } from '/@/api/ehs/taskConsole';
  //人员签到模型及接口
  import {
    StaffSignInDto,
    StaffSignInQueryConditionDto,
  } from '/@/api/ehs/model/staffSignInRecordModel';
  import { queryLatest } from '/@/api/ehs/staffSignInRecord';
  //摄像头模型及接口
  import { CameraDto, CameraQueryConditionDto } from '/@/api/ehs/model/cameraModel';
  import { queryCameras } from '/@/api/ehs/camera';

  //显示单元信息的子组件；基本信息、轮播图、全景图、危险源分布图
  import UnitBasicInfoView from './../../unitDivision/UnitBasicInfoView.vue';
  import UnitPanoramaViewModal from './../../unitDivision/UnitPanoramaViewModal.vue';
  import UnitVideoViewModal from './../../unitDivision/UnitVideoViewModal.vue';
  import ImageSwiper from '/@/components//QuCheng/Swiper/ImageSwiper.vue';
  import TextSwiper from '/@/components/QuCheng/Swiper/TextSwiper.vue';
  import Echarts from '/@/components/QuCheng/Charts/Echarts.vue';
  import LivePlayerModal from '/@/components/QuCheng/LivePlayerModal.vue';

  export default defineComponent({
    name: 'EhsDashBoardDataVIndex',
    components: {
      FullscreenExitOutlined,
      FullscreenOutlined,
      DownOutlined,
      HomeOutlined,
      CodepenOutlined,
      EnvironmentOutlined,
      BuildOutlined,
      WarningOutlined,
      BugOutlined,
      CarryOutOutlined,
      UserOutlined,
      VideoCameraOutlined,
      CommentOutlined,
      ThunderboltOutlined,
      GlobalOutlined,
      PlayCircleOutlined,
      CloseOutlined,
      Tooltip,
      UnitBasicInfoView,
      TextSwiper,
      ImageSwiper,
      Echarts,
      UnitPanoramaViewModal,
      UnitVideoViewModal,
      LivePlayerModal,
      ChatDrawer,
    },
    setup() {
      const userStore = useUserStoreWithOut();
      const router = useRouter();
      const { t } = useI18n();
      const projectCode = ref<String>(globalProjectCode);
      const getImageFileUrlPrefix = ref<string>(uploadUrl + getImageFileApi);

      //注册查看单元指定全景图弹出框
      const [
        registerUnitPanoramaViewModal,
        { openModal: openUnitPanoramaViewModal, closeModal: closeUnitPanoramaViewModal },
      ] = useModal();

      //注册查看单元指定视频弹出框
      const [
        registerUnitVideoViewModal,
        { openModal: openUnitVideoViewModal, closeModal: closeUnitVideoViewModal },
      ] = useModal();

      //注册查看摄像头视频弹出框
      const [
        registerLivePlayerModal,
        { openModal: openLivePlayerModal, closeModal: closeLivePlayerModal },
      ] = useModal();

      //注册AI对话框
      const [registerAIChatDrawer, { openDrawer: openAIChatDrawer }] = useDrawer();

      //统一定义各图层的z-index，避免出现图层遮挡导致无法显示；注意保持与datav.less中的z-index一致
      const mapGeo3DzIndex = 10; //地图中的底图图层，显示在最底层；用于设置zlevel
      const mapAddLayerzIndex = 15; //地图中的添加的图层（如单元、危险源等），显示在底图之上
      const interestDetailContainerzIndex = 20; //地图兴趣点详细信息显示容器，显示在地图所有图层之上
      const interestDetailEmptyContentzIndex = 10; //地图兴趣点详细信息为空时（无内容显示），显示在地图的底图之下
      const defaultMapViewControlAlpha = 18.5; //地图中设置给geo3D的视角空中的Alpha值，用于控制地图垂直方向的倾斜角度

      //统一定义地图中叠加的各图层的name
      const mapLayerUnitName = ref('unit');
      const mapLayerHazardName = ref('hazard');
      const mapLayerTroubleName = ref('trouble');
      const mapLayerTaskName = ref('task');
      const mapLayerStaffName = ref('staff');
      const mapLayerCameraName = ref('camera');

      //EHS中的组织机构信息，在页面加载时一次获取后方便后继使用；需要根据当前用户进行获取
      let ehsOrg: EhsOrgDto = null;

      //全屏属性及事件
      const { enter, toggle, exit, isFullscreen } = useFullscreen();
      //显示当前时间和星期
      const datetimeInterval = ref(null);
      const currentDate = ref('2023-7-20');
      const currentTime = ref('12:19:45');
      const currentWeek = ref('星期');

      /*
       * 引用来访问3维地图的DOM元素
       */
      const echartsMap3dContainerRef = ref<HTMLElement | null>(null);

      /*
       * 地图图层属性：用于记录当前显示的图层信息
       */
      const mapLayerOptions = reactive({
        //地图初始的行政区划编码、名称、组织机构代码
        initAdcd: '530000',
        initAdnm: '云南省',
        initOrgCode: '',
        initOrgName: '',
        //地图视角默认值
        mapViewControlAlpha: defaultMapViewControlAlpha,
        //地图叠加图层的显隐：单元、危险源、隐患、人员、摄像头、任务
        //由于3D的Series无法通过show或visiable属性控制显隐，因此通过动态从series集合中添加或移除进行显隐控制，记录添加到series中的索引号
        //通过动态添加或移除series中的序列会导致索引发生变化，使用记录的图层索引会导致索引错误无法进行移除问题
        showAdname: true,
        showUnitLayer: false,
        showHazardLayer: false,
        showTroubleLayer: false,
        showTaskLayer: false,
        showStaffLayer: false,
        showCameraLayer: false,
        showTaskTypeLayer: '',
        //底图操作和交互对象：点击选中的单元ID
        isClicking: false, //是否地图在点击中
        selectedObjectLayerName: '', //地图中当前选中的对象图层name，为空表示没有选中series中的图层对象
        selectedObjectId: '', //地图中当前选中的对象ID（单元ID、危险源ID、隐患ID、人员ID、摄像头ID）
        selectedObject: null, //地图中当前选中的对象DTO
      });

      /*
       * 叠加在底图之上的信息显示区域状态：用于控制叠加的各信息显示区域是否显示及显示的对象
       */
      const frontAreaState = reactive({
        showInSystemTitleObjectName: '', //显示在系统标题处的对象名称，选中单元时为单元名称，未选中单元时为组织名称
        showTopCenter: false, //是否显示上方中间区域
        showBottomCenter: false, //是否显示底部中间倒数1行区域（用于显示单元的全景图、风险分布图按钮）
        showLeftSide: false, //是否显示左侧区域
        showRightSide: false, //是否显示右侧区域
        //控制弹出的信息显示区域（弹出信息窗口方式，可以最大化、关闭）
        showPopupArea: false,
        //控制叠加的信息显示区域（叠加在地图之上，包含左侧、右侧、上方中间、下方中间）当前显示的对象：组织、单元
        showOrgInfo: false, //是否显示组织信息
        showUnitInfo: false, //是否显示指定单元信息，包含单元的基本信息、单元的最新安全状态、单元的危险源信息、单元的隐患信息、单元的任务信息
        showUnitHazardsInfo: false, //是否显示指定单元的危险源信息，在危险源图层中点击单元时显示单元的危险源信息
        showUnitHiddenTroublesInfo: false, //是否显示指定单元的隐患信息，在隐患图层中点击单元时显示单元的隐患信息
        showUnitTaskInfo: false, //是否显示指定单元的任务信息，在任务图层中点击单元时显示单元的任务信息
      });

      /*
       * 存储获取到的单元信息集合，如果组织不变化，不重复调用后台接口获取单元信息
       */
      let units: EhsUnitDto[] = [];

      /*
       * 选中单元的信息，包含基本信息、静态信息
       */
      const unit = reactive({
        basicinfo: null, //单元基本信息
        staticinfos: [], //单元静态信息集合
        textstaticinfos: [], //单元文字静态信息集合
        imagestaticinfos: [], //单元图片静态信息集合
        videostaticinfos: [], //单元视频静态信息集合
        panoramastaticinfos: [], //单元全景图静态信息集合
        hazardRiskLevelEchartsOption: null, //危险源（第一类）风险等级Echart图表选项
        troubleRiskLevelEchartsOption: null, //隐患风险等级Echart图表选项
        taskitems: [], //查询的指定时间段内的所有任务项集合，方便后面获取任务项的其他信息
        taskitemScrollTableConfig: null, //所有分类的安全生产任务项集合，最终显示在界面中的表格数据
        checktaskitemScrollTableConfig: null, //自查类安全生产任务项集合，最终显示在界面中的表格数据
        troublecorrects: [], //查询的指定时间段内的所有隐患治理集合，方便后面获取隐患治理的其他信息
        troublecorrectScrollTableConfig: null, //隐患治理类任务项集合，最终显示在界面中的表格数据
        troublecorrectStsInfo: {
          count: 0x0,
          notDispathCount: 0x0,
          notCorrectCount: 0x0,
          notCheckCount: 0x0,
          hasCheckCount: 0x0,
        }, //隐患整改治理的统计信息，总数、未派单、整改中、整改完成、已验收
        troublecorrectStatusEchartsOption: null, //隐患整改治理状态Echart图表选项
        taskEchartsOption: null, //任务Echart图表选项
        hazards: [], //第一类危险源集合，方便后面获取危险源的其他信息
        hazardScrollTableConfig: null, //第一类危险源轮播表数据
        hiddenTroubles: [], //第二类危险源（隐患）集合，方便后面获取隐患的其他信息
        hiddenTroubleScrollTableConfig: null, //第二类危险源（隐患）轮播表数据
        hazardIdentifyScrollTableConfig: null, //危险源辨识记录轮播表数据
        riskEvaluationScrollTableConfig: null, //风险评级评价记录轮播表数据
      });

      /*
       * 组织或单元的最新安全状态，风险评估值、危险源和隐患数量
       */
      const orgOrUnitLatestStatus = ref<EhsBoardOrgLatestStatusDTO>();

      /*
       * 导航栏点击跳转；根据参数可以在当前窗口进行路由跳转或者打开新的tab页
       */
      function onNavigatorBarItemClick(path, isNewTab) {
        if (isNewTab === true) {
          //如果是打开新的tab页
          window.open(path, '_blank');
        } else {
          //设置路由进行跳转
          router.push({
            path: path,
          });
          //可以进行路由判断，是否在菜单中有该权限
          // if (userStore.validateRoute(path) == true) {
          //   router.push({
          //     path: path,
          //   });
          // } else {
          //   createMessage.error('暂无访问权限。');
          //   return;
          // }
        }
      }

      /*
       * 更新当前时间和星期
       */
      function updateCurrentDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let week = now.getDay(); //返回的是一个介于0（代表星期日）到6（代表星期六）之间的整数
        let hour = now.getHours();
        let minute = now.getMinutes();
        let seconds = now.getSeconds();

        currentDate.value =
          year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
        currentTime.value =
          (hour > 9 ? hour : '0' + hour) +
          ':' +
          (minute > 9 ? minute : '0' + minute) +
          ':' +
          (seconds > 9 ? seconds : '0' + seconds);
        switch (week) {
          case 1:
            currentWeek.value = '星期一';
            break;
          case 2:
            currentWeek.value = '星期二';
            break;
          case 3:
            currentWeek.value = '星期三';
            break;
          case 4:
            currentWeek.value = '星期四';
            break;
          case 5:
            currentWeek.value = '星期五';
            break;
          case 6:
            currentWeek.value = '星期六';
            break;
          case 0:
            currentWeek.value = '星期日';
            break;
          default:
            currentWeek.value = '星期';
            break;
        }
      }

      //map容器定义
      let mapContainer = null;

      //测试添加柱状图的数据集
      let addBarSeriesPoints = [
        { station: '丘北县', num: 110 },
        { station: '富宁县', num: 150 },
        { station: '马关县', num: 200 },
      ];

      /*
       * 用于记录当前加载地图geoJson中行政区划信息集合，用于根据地名获取对应的编码等信息
       */
      let geoJsonFeatures = [];

      /*
       * 通过存储的geo地名和经纬度集合，根据名称获取地图显示的经纬度信息
       */
      const convertData = (data: any, geoCoorMap: any) => {
        const res = [];
        data.forEach((item) => {
          geoCoorMap.forEach((ele) => {
            if (ele.name.includes(item.station)) {
              res.push({
                name: item.station,
                value: ele.center.concat(item.num),
              });
            }
          });
        });
        return res;
      };

      //地图的底图只能通过设置geo3D或者series中type为map3D的其中之一进行设置，重复设置会导致地图重复（出现显示偏差）
      //实测确定：使用geo3D设置地图的底图及进行显示和视角控制，通过series设置叠加在地图之上的气泡或柱状图数据等
      //实测发现问题：通过geo3D设置地图的底图，鼠标移至区域和点击事件均无法触发；鼠标移至区域有报错：[ECharts] model or view can not be found by params
      //2025-5-8实测结论：通过geo3D设置地图底图的边界，通过series中叠加
      //2025-5-9实测结论：geo3D不设置任何地图和数据，均通过series中设置，先加载1个type: 'map3D'的作为地图，再通过动态添加序列显示柱状图或气泡图
      //不设置geo3D时，series中的柱状图或气泡图报错导致整个地图均无法显示：axios.get geo catch Error: geo "0" not found
      //2025-5-24实测结论：不通过series设置底图，通过geo3D设置底图；鼠标移至行政区划中会有报错，[ECharts] model or view can not be found by params
      //最终使用方法：通过geo3D设置底图（show: false让底图不显示）、series中设置显示的地图（type: 'map3D'）、series中叠加柱状图或气泡图
      //2025-5-30实测结论：通过geo3D设置底图（不显示）+series设置底图（显示）会导致叠加在底图上的其他图层位置会偏移（特别是roam操作时）
      //导致偏移的原因是通过在series中叠加的使用的是geo，roam操作时针对series中的底图；
      // 解决方案为：geo3D设置底图，series中仅设置叠加的图层；

      /*
       * 加载地图，指定行政区划名称和编码
       */
      function initMap(adname, adcode) {
        // 获取原始地图json数据
        const url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${adcode}_full`;
        axios
          .get(url)
          .then((res) => {
            //获取请求的响应结果
            let geoJsonData = res.data;
            mapContainer.clear();
            console.log('initMap echarts.registerMap ' + adname);
            echarts.registerMap(adname, geoJsonData);
            //获取geoJson中的第一个feature，根据其中的level判断地图的显示行政区划层级设置视角高度
            let mapFeatureLevel = geoJsonData.features[0].properties.level;
            // console.log('initMap mapFeatureLevel = ' + mapFeatureLevel);
            //根据层级设置地图的视角高度；地图层级分别为：省"province"、市"city"、区县"district"
            let mapViewControlDistance = 100;
            if (mapFeatureLevel == 'province') mapViewControlDistance = 110; //显示全国地图
            else if (mapFeatureLevel == 'city') mapViewControlDistance = 100; //显示一个省地图
            else if (mapFeatureLevel == 'district') mapViewControlDistance = 90; //显示一个市地图
            // 根据 json 数据拼装 mapdata， 用于地图点击下钻时传递数据，主要有adcode、name
            geoJsonFeatures = geoJsonData.features.map((item) => {
              return item.properties;
            });
            // 配置option
            let option = {
              title: {
                // 标题
                show: false,
                top: '5%', //显示在上面
                // bottom: '8%',
                text: adname,
                subtext: '',
                x: 'center',
                textStyle: {
                  color: '#fff',
                },
              },
              tooltip: {
                trigger: 'item', // 触发方式
                triggerOn: 'mousemove', // 鼠标移动触发
                formatter: function (params) {
                  // console.log('tooltip trigger item params', params);
                  // 根据不同的图层进行数据格式化显示，可以根据seriesName、seriesType进行不同的格式化显示
                  //如果鼠标移动的地图点上有多个series中的数据，同时会触发多个series的事件；需要根据图层的优先级来显示（最后显示行政区划底图信息）
                  //地图的底图使用geo3D方式添加时鼠标移至底图不会触发该事件
                  if (params.componentType === 'series') {
                    //针对添加到series的显示对应信息
                    if (params.seriesName === 'map-ad') {
                      //行政区划底图
                      const { adcode, name, level } = params.data;
                      // 返回自定义的tooltip内容
                      return `adcode: ${adcode}<br>name: ${name}<br>level: ${level}`;
                    } else if (params.seriesName === mapLayerUnitName.value) {
                      //单元图层，鼠标移至时显示单元名称、责任机制信息
                      const { unitname, resdeptname, resusername, safeusername } =
                        params.data.property;
                      return `${unitname}<br>责任部门: ${resdeptname}<br>责任人: ${resusername}<br>安全员: ${safeusername}`;
                    } else if (params.seriesName === mapLayerHazardName.value) {
                      //危险源图层，鼠标移至时显示单元名称、危险源数量
                      let unitname = params.data.name;
                      let hazardcount = params.data.value[2];
                      return `${unitname}<br>危险源数量: ${hazardcount}`;
                    } else if (params.seriesName === mapLayerTroubleName.value) {
                      //隐患图层，鼠标移至时显示单元名称、危险源数量
                      let unitname = params.data.name;
                      let hazardcount = params.data.value[2];
                      return `${unitname}<br>隐患数量: ${hazardcount}`;
                    } else if (params.seriesName === mapLayerTaskName.value) {
                      //任务图层，鼠标移至时显示任务数量
                      let unitname = params.data.name;
                      // console.log('mapLayerTaskName params.data.value', params.data.value);
                      let taskCount = params.data.value[2];
                      let finishCount = params.data.value[3];
                      let notFinishCount = params.data.value[4];
                      return `${unitname} <br>任务总数: ${taskCount}<br>已完成: ${finishCount}<br>未完成: ${notFinishCount}`;
                    } else if (params.seriesName === mapLayerStaffName.value) {
                      //人员图层，鼠标移至时显示人员名称
                      // console.log('mapLayerTaskName params.data.property', params.data.property);
                      const { username, location, tm, unitname, taskitemname } =
                        params.data.property;
                      return `${username} <br>签到时间: ${tm}<br>签到位置: ${location}<br>签到单元: ${unitname}<br>任务名称: ${taskitemname}`;
                    } else if (params.seriesName === mapLayerCameraName.value) {
                      //摄像头图层，鼠标移至时显示摄像头名称
                      let cameraname = params.data.name;
                      return `${cameraname}`;
                    } else if (params.seriesType == 'bar3D') {
                      return [
                        params.seriesName,
                        params.name + '：' + params.value[2] + (params.value[3] || ''),
                      ].join('<br />');
                    }
                  } else {
                    return params;
                  }
                },
                backgroundColor: 'rgba(50, 50, 50, 0.8)',
                textStyle: {
                  color: '#FFFFFF',
                  textalign: 'center',
                  fontSize: 12,
                },
              },
              geo3D: {
                show: true, //一定要设置为不显示，否则与series中的重复导致地图重叠显示错乱
                roam: true,
                // aspectScale: 1, //长宽比
                animation: false,
                center: [105, 30],
                zoom: 1,
                map: adname, //指定使用的地图图层名称，必须与 echarts.registerMap中指定的名称完全一致
                scaleLimit: {
                  min: 1,
                  max: 5,
                },
                zlevel: mapGeo3DzIndex + 0x1, //设置显示底层,geo3D中的zlevel必须比series中的底图的zlevel小，否则会导致添加的图层兴趣点被遮挡无法点击
                regionHeight: 3, //三维地图每个区域的高度，设置后对每个区域均有效，可以通过data中的相同属性进行分区域控制
                label: {
                  // 标签的相关设置
                  show: true, //叠加其他series图层后会导致底图中显示的行政区划名称文字变大，原因未知，暂时不显示行政区划名称
                  distance: 0, //标签距离图形的距离；需要设置为0，否则会在叠加3D柱状图时导致底图中的行政区划名称文字位置偏移
                  // show: name !== '中国', // (地图上的城市名称)是否显示标签 [ default: false ]
                  formatter: function (params) {
                    return params.name ? params.name : ' ';
                  },
                  position: 'right',
                  // 标签的字体样式，console中有警告信息：[ECharts] DEPRECATED: textStyle hierarchy in label has been removed since 4.0. All textStyle properties are configured in label directly now.
                  //实际echarts会默认在label中添加textStyle，并有默认值，会导致显示文字样式和字号不是预期
                  // color: '#fff', // 地图初始化区域字体颜色
                  // fontSize: 12, // 字体大小
                  //通过显式设置textStyle覆盖echarts设置的默认值
                  textStyle: {
                    //文字显示背景色和背景圆角框
                    backgroundColor: 'rgba(255,255,255,0.7)',
                    borderRadius: 4,
                    color: '#000',
                    fontSize: 12,
                    padding: 3,
                  },
                },
                //地图的颜色
                itemStyle: {
                  // color: '#2AB8FF', // 地图板块的颜色，蓝绿色
                  color: '#013954', // 地图板块的颜色，浅蓝色
                  // color: 'rgb(147, 235, 248)',
                  //地图区域的颜色
                  // areaColor: 'transparent', //地图区域的颜色//可以设置为透明
                  // areaColor: {
                  //   x: 0,
                  //   y: 0,
                  //   x2: 0,
                  //   y2: 1,
                  //   colorStops: [
                  //     { offset: 0, color: 'rgba(9, 89, 169, 0.5)' },
                  //     { offset: 1, color: 'rgba(3, 25, 48, 0.5)' },
                  //   ],
                  // },
                  opacity: 0.8, // 图形的不透明度 [ default: 1 ]
                  // borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                  // borderColor: '#286ECA', // 图形描边的颜色。[ default: #333 ]
                  //图形的描边颜色
                  borderColor: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
                  // borderColor: new echarts.graphic.LinearGradient(
                  //   0,
                  //   0,
                  //   0,
                  //   1,
                  //   [
                  //     { offset: 0, color: '#0a94c2' },
                  //     { offset: 1, color: '#0982a9' },
                  //   ],
                  //   false,
                  // ),
                  borderWidth: 2,
                  //阴影颜色，实测设置后无效，最终显示颜色均为地图板块的颜色
                  // shadowColor: '#0f6b8a',
                  // shadowColor: '#ff0000',
                  // shadowColor: 'rgba(147, 235, 248,0.5)',
                  // shadowColor: 'rgba(9, 89, 169, 0.8)',
                  //阴影水平、垂直方向上的偏移距离；设置后会有立体效果
                  shadowOffsetX: 10,
                  shadowOffsetY: 10,
                  //图形阴影的模糊大小
                  shadowBlur: 10,
                },
                emphasis: {
                  // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                  label: {
                    // label 高亮时的配置
                    show: true,
                    // 标签的字体样式
                    color: '#fff', // 高亮时标签颜色变为 白色
                    fontSize: 12, // 高亮时标签字体 变大
                  },
                  itemStyle: {
                    // itemStyle 高亮时的配置
                    areaColor: '#66ffff', // 高亮时地图板块颜色改变
                  },
                },
                groundPlane: {
                  // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                  show: false, // 是否显示地面。[ default: false ]
                  color: '#aaa', // 地面颜色。[ default: '#aaa' ]
                },
                // shading: 'lambert', //三维地图中三维图形的着色效果，取值为：color、lambert、realistic
                light: {
                  // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                  main: {
                    // 场景主光源的设置，在 globe 组件中就是太阳光。
                    color: '#3D94CE', // 主光源的颜色。[ default: #fff ]
                    intensity: 1.2, // 主光源的强度。[ default: 1 ]
                    shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                    // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                    alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                    beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                  },
                  ambient: {
                    // 全局的环境光设置。
                    // color: 'red', // 环境光的颜色。[ default: #fff ]
                    intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                  },
                },
                viewControl: {
                  // 用于鼠标的旋转，缩放等视角控制。
                  projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                  autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                  autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                  autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                  autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                  damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                  rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                  zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                  panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                  panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                  rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                  distance: mapViewControlDistance, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                  minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                  maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                  alpha: defaultMapViewControlAlpha, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]；取值为0-90，值越小立体效果越明显，值越大越接近平面显示效果
                  beta: 0, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                  minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                  maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                  minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                  maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                  center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                  animation: true, // 是否开启动画。[ default: true ]
                  animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                  animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
                },
                //不通过geo3D设置地图底图数据时，通过设置series的data进行设置
                //不设置data时鼠标移至对应区域无法获取行政区划编码和名称
                data: geoJsonFeatures,
              },
              series: [
                //测试叠加柱状图
                // {
                //   name: 'hazard',
                //   type: 'bar3D',
                //   coordinateSystem: 'geo3D',
                //   geoIndex: 0,
                //   shading: 'lambert',
                //   label: {
                //     show: true,
                //     position: 'top',
                //   },
                //   data: convertData(addBarSeriesPoints, geoJsonFeatures),
                //   barSize: 2,
                //   minHeight: 1,
                //   itemStyle: {
                //     color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
                //   },
                //   emphasis: {
                //     label: { show: true },
                //   },
                //   zlevel: mapAddLayerzIndex, //设置为显示的底图之上
                // },
              ],
            };
            //调用echarts的setOption更新地图显示
            mapContainer && mapContainer.setOption(option, true);
          })
          .catch((ex) => {
            console.log('axios.get geo catch', ex);
          });
      }

      /*
       * 重置地图，恢复到初始状态
       */
      function onResetMapButtonClick() {
        console.log('onResetMapButtonClick');
        //回到地图初始化的行政区划显示
        initMap(mapLayerOptions.initAdnm, mapLayerOptions.initAdcd);
        //设置地图的视角控制对象
        mapLayerOptions.mapViewControlAlpha = defaultMapViewControlAlpha;
        //设置地图控制属性对象
        mapLayerOptions.showAdname = true;
        mapLayerOptions.showUnitLayer = false;
        mapLayerOptions.showHazardLayer = false;
        mapLayerOptions.showTroubleLayer = false;
        mapLayerOptions.showTaskLayer = false;
        mapLayerOptions.showStaffLayer = false;
        mapLayerOptions.showCameraLayer = false;
        mapLayerOptions.showTaskTypeLayer = '';
        mapLayerOptions.selectedObjectLayerName = '';
        mapLayerOptions.selectedObjectId = '';
        mapLayerOptions.selectedObject = null;
        //初始化叠加信息显示区域状态
        frontAreaState.showTopCenter = false;
        frontAreaState.showLeftSide = false;
        frontAreaState.showBottomCenter = false;
        frontAreaState.showRightSide = false;
        frontAreaState.showOrgInfo = false;
        frontAreaState.showUnitInfo = false;
        frontAreaState.showUnitHazardsInfo = false;
        frontAreaState.showUnitHiddenTroublesInfo = false;
        frontAreaState.showUnitTaskInfo = false;
        //重新加载组织的最新安全状态信息
        loadOrgLatestStatus();
      }

      /*
       * 改变地图视角控制，设置alpha值
       */
      function onChangeMapViewControlButtonClick() {
        console.log('onChangeMapViewControlButtonClick');
        //获取当前地图的视角alpha值
        let alpha = mapLayerOptions.mapViewControlAlpha;
        //获取当前地图配置
        const myOption = mapContainer.getOption();
        console.log('onChangeMapViewControlButtonClick getOption', myOption);
        let distance = myOption.geo3D[0].viewControl.distance;
        //由于视角的变化会导致视角高度需要调整，因此需要同步设置distance属性

        if (alpha >= 90) {
          //当前是平面，修改为默认的立体角度
          alpha = defaultMapViewControlAlpha;
          //视角高度减去20
          distance -= 20;
        } else {
          //当前是立体角度，修改为平面角度90度
          alpha = 90;
          //视角高度加上20
          distance += 20;
        }

        //设置地图的视角控制属性
        myOption.geo3D[0].viewControl.alpha = alpha; //geo3D为数组，获取第1个进行属性赋值
        myOption.geo3D[0].viewControl.distance = distance; //geo3D为数组，获取第1个进行属性赋值
        mapContainer && mapContainer.setOption(myOption, true);

        console.log('onChangeMapViewControlButtonClick setOption', myOption);
        mapLayerOptions.mapViewControlAlpha = alpha;
      }

      /*
       * 地图图层-地图底图中的label是否显示
       */
      function onMapShowAdnameButtonClick() {
        let showFlag = mapLayerOptions.showAdname;
        //判断本次操作是要显示还是隐藏
        const myOption = mapContainer.getOption();
        //设置第1个series的label中的show属性，设置为当前状态取反值
        // myOption.series[0x0].label.show = !showFlag;
        //行政区划底图有series中调整为geo3D中设置
        myOption.geo3D[0x0].label.show = !showFlag;
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);

        console.log('onMapShowAdnameButtonClick setOption', myOption);

        //取反，修改单元图层显隐状态标识
        mapLayerOptions.showAdname = !showFlag;

        notification.success({
          message: t('操作成功'),
          description: `已成功设置行政区划名称。`,
          duration: 2,
        });
      }

      /*
       * 地图图层-单元显隐切换
       */
      function onMapUnitLayerButtonClick() {
        //图层显隐切换前先重置地图的选中对象和叠加的信息显示区域
        resetMapSelectedAndInfoArea();

        let showFlag = mapLayerOptions.showUnitLayer;
        //判断本次操作是要显示还是隐藏
        if (showFlag === true) {
          //当前是显示状态，设置为隐藏
          removeUnitLayerFromMap();

          //隐藏图层后显示提示信息
          notification.success({
            message: t('操作成功'),
            description: `已成功卸载单元图层。`,
            duration: 2,
          });
        } else {
          //当前是隐藏状态，设置为显示
          //设置其他图层不显示
          // removeUnitLayerFromMap();
          removeHazardLayerFromMap();
          removeTroubleLayerFromMap();
          removeTaskLayerFromMap();
          removeStaffLayerFromMap();
          removeCameraLayerFromMap();
          //判断单元信息集合是否有数据，如果已有数据显示单元图层；如果没有数据先进行单元信息获取在控制显隐;
          if (units == null || units.length < 0x1) {
            //没有单元信息集合，先调用后台接口获取单元信息
            //构造单元查询条件
            let queryUnitListCondtion: EhsUnitQueryConditionDto = {
              orgcode: ehsOrg.orgcode,
              includechilds: true,
              isdept: false,
              flagisvalid: true,
            };
            queryUnitList(queryUnitListCondtion)
              .then((res) => {
                console.log('queryUnitList res', res);
                units = res;
                //添加单元图层显示
                addUnitLayerToMap();
              })
              .catch((ex) => {
                createErrorModal({
                  title: t('sys.api.errorTip'),
                  content: ex,
                  getContainer: () => document.body,
                });
              });
          } else {
            //已有单元信息集合，添加单元图层显示
            addUnitLayerToMap();
          }
        }
      }

      /*
       * 地图图层中移除单元图层
       */
      function removeUnitLayerFromMap() {
        const myOption = mapContainer.getOption();
        let seriesIndex = -1; //记录图层对应series中的索引序号，为-1表示不存在
        if (myOption && myOption.series && myOption.series.length > 0x0) {
          for (let index = 0; index < myOption.series.length; index++) {
            //获取series中判断是否有name为当前图层的序列并获取索引序号
            if (myOption.series[index].name === mapLayerUnitName.value) {
              seriesIndex = index;
              break;
            }
          }
        }
        if (seriesIndex >= 0x0) {
          //设置option中的标题
          myOption.title[0].text = '';
          //splice方法，指定起始索引和删除元素数量
          myOption.series.splice(seriesIndex, 0x1);
          //调用echarts的setOption更新地图显示
          mapContainer && mapContainer.setOption(myOption, true);
          console.log('removeUnitLayerFromMap setOption', myOption);
        }
        //修改图层显隐状态标识
        mapLayerOptions.showUnitLayer = false;
        //移除单元图层时设置叠加显示区域中关于单元图层的属性为false
        frontAreaState.showUnitInfo = false;
      }

      /*
       * 地图图层中添加单元图层显示
       */
      function addUnitLayerToMap() {
        if (!units || units.length < 0x1) {
          notification.error({
            message: t('数据错误'),
            description: `单元信息为空，无法进行单元图层的加载。`,
            duration: 5,
          });
          return;
        }
        //序列的data数据集赋值
        let seriesData = [];
        units.forEach((item) => {
          //在map3D中添加1个series；其中data属性为：{name:xxx,value:[经度,纬度,数据数值]}
          //判断如果单元的经纬度均有才能添加，否则无法在地图中显示
          if (item && item.longitude && item.latitude) {
            seriesData.push({
              name: item.unitname,
              value: [item.longitude, item.latitude],
              property: item, //将单元的所有属性均传递给data，方便后面在tooltip中显示
            });
          }
        });

        const myOption = mapContainer.getOption();
        //构造单元的3D散点图Series对象
        let series = {
          name: mapLayerUnitName.value,
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          geoIndex: 0,
          zlevel: mapAddLayerzIndex, //设置为显示的底图之上
          itemStyle: {
            color: 'rgb(147, 235, 248)',
            // color: '#FFCC00',
            // color: '#000000',
            opacity: 1,
            borderWidth: 1,
            borderColor: '#ffffff',
          },
          symbol: 'circle',
          //定位图标
          // symbol:
          //   'path://M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z',
          //人形图标
          // symbol:
          //   'path://M632.855273 565.992727c101.771636-47.080727 172.590545-149.317818 172.590545-267.869091 0-163.118545-133.678545-295.842909-298.007273-295.842909C343.202909 2.280727 209.454545 135.005091 209.454545 298.077091c0 118.597818 70.842182 220.834909 172.590545 267.915636C188.020364 622.336 44.311273 805.329455 38.469818 1024l46.615273 0 844.753455 0 46.638545 0C970.612364 805.329455 826.926545 622.336 632.855273 565.992727z',
          symbolSize: [10, 10, 10], //宽，高，xx
          // symbolSize: [10, 10, 20], //宽，高，xx
          data: seriesData,
          //设置直接在图标上方显示对应的数据值
          label: {
            show: true,
            position: 'right', // 可以选择显示在顶部、底部等位置
            // offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
            distance: 5, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
            rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
            formatter: function (params) {
              //显示单元名称，可以使用name或者从property中获取对应属性
              // return params.data.name;
              return params.data.property.unitname;
            },
            //通过显式设置textStyle覆盖echarts设置的默认值
            textStyle: {
              //文字显示背景色和背景圆角框
              backgroundColor: 'rgba(255,255,255,0.7)',
              borderRadius: 4,
              color: '#000',
              fontSize: 14,
              padding: 3,
            },
          },
        };
        //设置option中的标题
        myOption.title[0].text = '单元分布图';
        //加入到option的series中
        myOption.series.push(series);
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);
        console.log('addUnitLayerToMap setOption', myOption);

        //修改图层显隐状态标识
        mapLayerOptions.showUnitLayer = true;

        //显示单元图层后显示提示信息
        notification.success({
          message: t('操作成功'),
          description: `已成功加载单元图层显示。`,
          duration: 2,
        });
      }

      /*
       * 地图图层-危险源显隐切换
       */
      function onMapHazardLayerButtonClick() {
        //图层显隐切换前先重置地图的选中对象和叠加的信息显示区域
        resetMapSelectedAndInfoArea();

        let showFlag = mapLayerOptions.showHazardLayer;
        //判断本次操作是要显示还是隐藏
        if (showFlag === true) {
          //当前是显示状态，设置为隐藏
          removeHazardLayerFromMap();
          //隐藏图层后显示提示信息
          notification.success({
            message: t('操作成功'),
            description: `已成功卸载危险源图层。`,
            duration: 2,
          });
        } else {
          //当前是隐藏状态，设置为显示
          //设置其他图层不显示
          removeUnitLayerFromMap();
          // removeHazardLayerFromMap();
          removeTroubleLayerFromMap();
          removeTaskLayerFromMap();
          removeStaffLayerFromMap();
          removeCameraLayerFromMap();

          if (units && units.length > 0x0) {
            //序列的data数据集赋值
            let unitIds = [];
            let hazardCounts = [];

            //对每个单元生成随机数表示危险源数量--模拟数据使用
            // units.forEach((item) => {
            //   let randomNumber = Math.floor(Math.random() * 20) + 1; //生成1-21之间的随机数

            //   unitIds.push(item.unitid);
            //   hazardCounts.push(randomNumber);
            // });
            // addHazardLayerToMap(unitIds, hazardCounts, '');

            //构造按单元统计第一类危险源的查询条件
            let condition: EhsBoardOrgUnitHazardsQueryConditionDto = {
              orgcode: ehsOrg.orgcode,
              flag: 0x1, //只查询第一类危险源
            };
            stsEhsBoardOrgUnitsHazardCounts(condition)
              .then((res) => {
                console.log('stsEhsBoardOrgUnitsHazardCounts res', res);
                if (res && res.length > 0x0) {
                  res.forEach((item) => {
                    unitIds.push(item.unitid);
                    let hazardCount = 0x0;
                    if (item.hazard) hazardCount = item.hazard.count; //获取返回结果中的单元的第一类危险源总数
                    hazardCounts.push(hazardCount);
                  });
                }
                //添加各单元的第一类危险源数量柱状图图层
                addHazardLayerToMap(unitIds, hazardCounts, '');
              })
              .catch((ex) => {
                createErrorModal({
                  title: t('sys.api.errorTip'),
                  content: ex,
                  getContainer: () => document.body,
                });
              });
          }
        }
      }

      /*
       * 地图图层中移除危险源图层
       */
      function removeHazardLayerFromMap() {
        if (mapContainer && mapContainer.getOption()) {
          const myOption = mapContainer.getOption();
          console.log('removeHazardLayerFromMap myOption', myOption);
          let seriesIndex = -1; //记录图层对应series中的索引序号，为-1表示不存在
          if (myOption && myOption.series && myOption.series.length > 0x0) {
            for (let index = 0; index < myOption.series.length; index++) {
              console.log(
                'removeHazardLayerFromMap index=' + index + ' name=' + myOption.series[index].name,
              );
              //获取series中判断是否有name为当前图层的序列并获取索引序号
              if (myOption.series[index].name == mapLayerHazardName.value) {
                seriesIndex = index;
                break;
              }
            }
          }
          console.log('removeHazardLayerFromMap myOption.series.length', myOption.series.length);
          console.log('removeHazardLayerFromMap seriesIndex', seriesIndex);
          if (seriesIndex >= 0x0) {
            //设置option中的标题
            myOption.title[0].text = '';
            //splice方法，指定起始索引和删除元素数量
            myOption.series.splice(seriesIndex, 0x1);
            //调用echarts的setOption更新地图显示
            mapContainer && mapContainer.setOption(myOption, true);
            console.log('removeHazardLayerFromMap setOption', myOption);
          }
        }

        //修改图层显隐状态标识
        mapLayerOptions.showHazardLayer = false;
        //移除危险源图层时设置叠加显示区域中关于危险源图层的属性为false
        frontAreaState.showUnitHazardsInfo = false;
      }

      /*
       * 地图图层中添加危险源图层显示，传入单元对应的危险源总数（可以指定危险源的一般/重大、风险等级）
       */
      function addHazardLayerToMap(
        unitIds: string[],
        hazardCounts: number[],
        hazardTypeOrRisk: string,
      ) {
        //hazardTypeOrRisk:危险源的类型（一般/重大、风险等级）；为空表示所有危险源，为其他表示对应的危险源类型(显示柱状图时可以根据不同类型使用不同颜色)，如：重大、高风险
        //传入条件中传入单元ID和对应的数量，2个数组顺序保持一致；单元的名称从已查询的查询信息集合中获取
        if (!units || units.length < 0x1) {
          notification.error({
            message: t('数据错误'),
            description: `单元信息为空，无法进行单元图层的加载。`,
            duration: 5,
          });
          return;
        }
        //序列的data数据集赋值
        let seriesData = [];
        //遍历单元信息集合，逐个单元ID在传入的数据中匹配，如果不能匹配设置单元的危险源数量为0
        units.forEach((item) => {
          //在map3D中添加1个series；其中data属性为：{name:xxx,value:[经度,纬度,数据数值]}
          //判断如果单元的经纬度均有才能添加，否则无法在地图中显示
          if (item && item.longitude && item.latitude) {
            //在单元信息属性中添加危险源数量，默认危险源数量为0
            let unitHazardCount = 0x0;
            if (unitIds && unitIds.length > 0x0) {
              let unitIndex = unitIds.indexOf(item.unitid);
              if (unitIndex >= 0x0) unitHazardCount = hazardCounts[unitIndex];
            }
            seriesData.push({
              name: item.unitname,
              //使用3D柱状图设置的数据只能在value中设置，固定数组的顺序为：精度、纬度、数据值
              value: [item.longitude, item.latitude, unitHazardCount],
              property: item, //额外增加property属性，用于在点击时获取单元信息
            });
          }
        });

        const myOption = mapContainer.getOption();
        //构造1个3D柱状图Series对象
        let series = {
          name: mapLayerHazardName.value,
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          geoIndex: 0,
          shading: 'lambert',
          label: {
            show: true,
            position: 'top', // 可以选择显示在顶部、底部等位置
            offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
            distance: 0, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
            rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
            //在使用富文本标签时，formatter 函数返回的字符串中使用了 {a|...} 的形式来定义文本样式。其中 a 是样式名称，在 rich 中定义
            formatter: function (params) {
              // return `{a|${params.name}\r\n危险源数量：${params.value[2]}}`; // 只显示z轴的值，并自定义样式
              return `{a|${params.value[2]}}`; // 只显示z轴的值，并自定义样式
            },
            rich: {
              a: {
                //文字显示背景色和背景圆角框
                backgroundColor: 'rgba(255,255,255,0.7)',
                borderRadius: 4,
                color: '#000',
                fontSize: 14,
                padding: 3,
                boxShadowBlur: 4, // 阴影模糊大小
                shadowColor: 'rgba(0,0,0,0.3)', // 阴影颜色
              },
            },
          },
          data: seriesData, //convertData(addBarSeriesPoints, geoJsonFeatures),
          barSize: 1,
          minHeight: 1, //设置最小高度为1以在地图中突出显示，没有柱子高度时无法触发鼠标移至事件
          itemStyle: {
            color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
            // color: '#FFB239', //柱子颜色为金黄色
          },
          emphasis: {
            label: { show: true },
          },
          zlevel: mapAddLayerzIndex, //设置为显示的底图之上
        };
        console.log('addHazardLayerToMap series', series);
        //设置option中的标题
        myOption.title[0].text = '单元危险源数量分布图';
        //加入到option的series中
        myOption.series.push(series);
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);
        console.log('addHazardLayerToMap setOption', myOption);

        //修改图层显隐状态标识
        mapLayerOptions.showHazardLayer = true;

        //显示单元图层后显示提示信息
        notification.success({
          message: t('操作成功'),
          description: `已成功加载危险源图层显示。`,
          duration: 2,
        });
      }

      /*
       * 地图图层-隐患显隐切换
       */
      function onMapTroubleLayerButtonClick() {
        //图层显隐切换前先重置地图的选中对象和叠加的信息显示区域
        resetMapSelectedAndInfoArea();

        let showFlag = mapLayerOptions.showTroubleLayer;
        //判断本次操作是要显示还是隐藏
        if (showFlag === true) {
          //当前是显示状态，设置为隐藏
          removeTroubleLayerFromMap();
          //隐藏图层后显示提示信息
          notification.success({
            message: t('操作成功'),
            description: `已成功卸载隐患图层。`,
            duration: 2,
          });
        } else {
          //当前是隐藏状态，设置为显示
          //设置其他图层不显示
          removeUnitLayerFromMap();
          removeHazardLayerFromMap();
          // removeTroubleLayerFromMap();
          removeTaskLayerFromMap();
          removeStaffLayerFromMap();
          removeCameraLayerFromMap();

          if (units && units.length > 0x0) {
            //序列的data数据集赋值
            let unitIds = [];
            let hazardCounts = [];

            //对每个单元生成随机数表示危险源数量--模拟数据使用
            // units.forEach((item) => {
            //   let randomNumber = Math.floor(Math.random() * 20) + 1; //生成1-21之间的随机数

            //   unitIds.push(item.unitid);
            //   hazardCounts.push(randomNumber);
            // });
            // addTroubleLayerToMap(unitIds, hazardCounts, '');

            //构造按单元统计第二类危险源的查询条件
            let condition: EhsBoardOrgUnitHazardsQueryConditionDto = {
              orgcode: ehsOrg.orgcode,
              flag: 0x2, //只查询第二类危险源
            };
            stsEhsBoardOrgUnitsHazardCounts(condition)
              .then((res) => {
                console.log('stsEhsBoardOrgUnitsHazardCounts res', res);
                if (res && res.length > 0x0) {
                  res.forEach((item) => {
                    unitIds.push(item.unitid);
                    let hazardCount = 0x0;
                    if (item.trouble) hazardCount = item.trouble.count; //获取返回结果中的单元的第二类危险源总数
                    hazardCounts.push(hazardCount);
                  });
                }
                //添加各单元的第二类危险源数量柱状图图层
                addTroubleLayerToMap(unitIds, hazardCounts, '');
              })
              .catch((ex) => {
                createErrorModal({
                  title: t('sys.api.errorTip'),
                  content: ex,
                  getContainer: () => document.body,
                });
              });
          }
        }
      }

      /*
       * 地图图层中移除隐患图层
       */
      function removeTroubleLayerFromMap() {
        const myOption = mapContainer.getOption();
        let seriesIndex = -1; //记录图层对应series中的索引序号，为-1表示不存在
        if (myOption && myOption.series && myOption.series.length > 0x0) {
          for (let index = 0; index < myOption.series.length; index++) {
            console.log(
              'removeTroubleLayerFromMap index=' + index + ' name=' + myOption.series[index].name,
            );
            //获取series中判断是否有name为当前图层的序列并获取索引序号
            if (myOption.series[index].name == mapLayerTroubleName.value) {
              seriesIndex = index;
              break;
            }
          }
        }
        console.log('removeTroubleLayerFromMap myOption.series.length', myOption.series.length);
        console.log('removeTroubleLayerFromMap seriesIndex', seriesIndex);
        if (seriesIndex >= 0x0) {
          //设置option中的标题
          myOption.title[0].text = '';
          //splice方法，指定起始索引和删除元素数量
          myOption.series.splice(seriesIndex, 0x1);
          //调用echarts的setOption更新地图显示
          mapContainer && mapContainer.setOption(myOption, true);
          console.log('removeTroubleLayerFromMap setOption', myOption);
        }

        //修改图层显隐状态标识
        mapLayerOptions.showTroubleLayer = false;
        //移除隐患图层时设置叠加显示区域中关于隐患图层的属性为false
        frontAreaState.showUnitHiddenTroublesInfo = false;
      }

      /*
       * 地图图层中添加隐患图层显示
       */
      function addTroubleLayerToMap(
        unitIds: string[],
        troubleCounts: number[],
        troubleTypeOrRisk: string,
      ) {
        //troubleTypeOrRisk:危险源的类型（一般/重大、风险等级）；为空表示所有危险源，为其他表示对应的危险源类型(显示柱状图时可以根据不同类型使用不同颜色)，如：重大、高风险
        //传入条件中传入单元ID和对应的数量，2个数组顺序保持一致；单元的名称从已查询的查询信息集合中获取
        if (!units || units.length < 0x1) {
          notification.error({
            message: t('数据错误'),
            description: `单元信息为空，无法进行单元图层的加载。`,
            duration: 5,
          });
          return;
        }
        //序列的data数据集赋值
        let seriesData = [];
        //遍历单元信息集合，逐个单元ID在传入的数据中匹配，如果不能匹配设置单元的危险源数量为0
        units.forEach((item) => {
          //在map3D中添加1个series；其中data属性为：{name:xxx,value:[经度,纬度,数据数值]}
          //判断如果单元的经纬度均有才能添加，否则无法在地图中显示
          if (item && item.longitude && item.latitude) {
            //在单元信息属性中添加危险源数量，默认危险源数量为0
            let unitHazardCount = 0x0;
            if (unitIds && unitIds.length > 0x0) {
              let unitIndex = unitIds.indexOf(item.unitid);
              if (unitIndex >= 0x0) unitHazardCount = troubleCounts[unitIndex];
            }
            seriesData.push({
              name: item.unitname,
              //使用3D柱状图设置的数据只能在value中设置，固定数组的顺序为：精度、纬度、数据值
              value: [item.longitude, item.latitude, unitHazardCount],
              property: item, //额外增加property属性，用于在点击时获取单元信息
            });
          }
        });

        const myOption = mapContainer.getOption();
        //构造1个3D柱状图Series对象
        let series = {
          name: mapLayerTroubleName.value,
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          geoIndex: 0,
          shading: 'lambert',
          label: {
            show: true,
            position: 'top', // 可以选择显示在顶部、底部等位置
            offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
            distance: 0, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
            rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
            //在使用富文本标签时，formatter 函数返回的字符串中使用了 {a|...} 的形式来定义文本样式。其中 a 是样式名称，在 rich 中定义
            formatter: function (params) {
              // return `{a|${params.name}\r\n危险源数量：${params.value[2]}}`; // 只显示z轴的值，并自定义样式
              return `{a|${params.value[2]}}`; // 只显示z轴的值，并自定义样式
            },
            rich: {
              a: {
                //文字显示背景色和背景圆角框
                backgroundColor: 'rgba(255,255,255,0.7)',
                borderRadius: 4,
                color: '#000',
                fontSize: 14,
                padding: 3,
                boxShadowBlur: 4, // 阴影模糊大小
                shadowColor: 'rgba(0,0,0,0.3)', // 阴影颜色
              },
            },
          },
          data: seriesData, //convertData(addBarSeriesPoints, geoJsonFeatures),
          barSize: 1,
          minHeight: 1, //设置最小高度为1以在地图中突出显示，没有柱子高度时无法触发鼠标移至事件
          itemStyle: {
            // color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
            color: '#FFB239', //柱子颜色为金黄色
          },
          emphasis: {
            label: { show: true },
          },
          zlevel: mapAddLayerzIndex, //设置为显示的底图之上
        };
        console.log('addTroubleLayerToMap series', series);
        //设置option中的标题
        myOption.title[0].text = '隐患分布图';
        //加入到option的series中
        myOption.series.push(series);
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);
        console.log('addTroubleLayerToMap setOption', myOption);

        //修改图层显隐状态标识
        mapLayerOptions.showTroubleLayer = true;

        //显示单元图层后显示提示信息
        notification.success({
          message: t('操作成功'),
          description: `已成功加载隐患图层显示。`,
          duration: 2,
        });
      }

      /*
       * 地图图层-任务显隐切换
       */
      function onMapTaskLayerButtonClick() {
        //图层显隐切换前先重置地图的选中对象和叠加的信息显示区域
        resetMapSelectedAndInfoArea();

        let showFlag = mapLayerOptions.showTaskLayer;
        //判断本次操作是要显示还是隐藏
        if (showFlag === true) {
          //当前是显示状态，设置为隐藏
          removeTaskLayerFromMap();
          //隐藏图层后显示提示信息
          notification.success({
            message: t('操作成功'),
            description: `已成功卸载任务图层。`,
            duration: 2,
          });
        } else {
          //当前是隐藏状态，设置为显示
          //设置其他图层不显示
          removeUnitLayerFromMap();
          removeHazardLayerFromMap();
          removeTroubleLayerFromMap();
          // removeTaskLayerFromMap();
          removeStaffLayerFromMap();
          removeCameraLayerFromMap();

          if (units && units.length > 0x0) {
            //序列的data数据集赋值
            let unitIds = [];
            let taskCounts = [];
            let finishCounts = [];
            let notFinishCounts = [];

            //构造统计组织内各单元任务数量查询条件，查询本年截止今日的任务
            let queryBeginTime = moment().startOf('year').format('YYYY-MM-DD');
            let queryEndTime = moment().endOf('year').format('YYYY-MM-DD');
            //查询时间设置为当天
            queryEndTime = moment().endOf('day').format('YYYY-MM-DD');
            let condition: EhsBoardTaskQueryConditionDto = {
              orgcode: ehsOrg.orgcode,
              begintm: queryBeginTime,
              endtm: queryEndTime,
              tasktype: 0x0, //查询所有类型任务
            };
            stsEhsBoardOrgUnitsTaskCounts(condition).then((res) => {
              console.log('stsEhsBoardOrgUnitsTaskCounts res', res);
              if (res && res.length > 0x0) {
                res.forEach((item) => {
                  console.log('stsEhsBoardOrgUnitsTaskCounts item', item);
                  unitIds.push(item.unitid);
                  let taskCount = 0x0;
                  let finishCount = 0x0;
                  let notFinishCount = 0x0;
                  if (item.task) {
                    taskCount = item.task.count; //获取返回结果中的单元的所有任务总数
                    finishCount = item.task.finishcount;
                    if (taskCount > 0x0 && taskCount > finishCount)
                      notFinishCount = taskCount - finishCount; //计算未完成任务数量
                  }
                  taskCounts.push(taskCount);
                  finishCounts.push(finishCount);
                  notFinishCounts.push(notFinishCount);
                });
              }
              //添加各单元的任务数量柱状图图层
              addTaskLayerToMap(unitIds, taskCounts, finishCounts, notFinishCounts);
            });
            // .catch((ex) => {
            //   createErrorModal({
            //     title: t('sys.api.errorTip'),
            //     content: ex,
            //     getContainer: () => document.body,
            //   });
            // });
          }
        }
      }

      /*
       * 地图图层中移除任务图层
       */
      function removeTaskLayerFromMap() {
        const myOption = mapContainer.getOption();
        let seriesIndex = -1; //记录图层对应series中的索引序号，为-1表示不存在
        if (myOption && myOption.series && myOption.series.length > 0x0) {
          for (let index = 0; index < myOption.series.length; index++) {
            console.log(
              'removeTaskLayerFromMap index=' + index + ' name=' + myOption.series[index].name,
            );
            //获取series中判断是否有name为当前图层的序列并获取索引序号
            if (myOption.series[index].name == mapLayerTaskName.value) {
              seriesIndex = index;
              break;
            }
          }
        }
        console.log('removeTaskLayerFromMap myOption.series.length', myOption.series.length);
        console.log('removeTaskLayerFromMap seriesIndex', seriesIndex);
        if (seriesIndex >= 0x0) {
          //设置option中的标题
          myOption.title[0].text = '';
          //splice方法，指定起始索引和删除元素数量
          myOption.series.splice(seriesIndex, 0x1);
          //调用echarts的setOption更新地图显示
          mapContainer && mapContainer.setOption(myOption, true);
          console.log('removeTaskLayerFromMap setOption', myOption);
        }

        //修改图层显隐状态标识
        mapLayerOptions.showTaskLayer = false;
        //移除任务图层时设置叠加显示区域中关于任务图层的属性为false
        frontAreaState.showUnitTaskInfo = false;
      }

      /*
       * 地图图层中添加任务图层显示
       */
      function addTaskLayerToMap(
        unitIds: string[],
        taskCounts: number[],
        finishCounts: number[],
        notFinishCounts: number[],
      ) {
        //传入条件中传入单元ID和对应的数量，2个数组顺序保持一致；单元的名称从已查询的查询信息集合中获取
        if (!units || units.length < 0x1) {
          notification.error({
            message: t('数据错误'),
            description: `单元信息为空，无法进行单元任务数量图层的加载。`,
            duration: 5,
          });
          return;
        }
        //序列的data数据集赋值
        let seriesData = [];
        let finishSeriesData = [];
        let notFinishSeriesData = [];
        //遍历单元信息集合，逐个单元ID在传入的数据中匹配，如果不能匹配设置单元的任务数量为0
        units.forEach((item) => {
          //在map3D中添加1个series；其中data属性为：{name:xxx,value:[经度,纬度,数据数值]}
          //判断如果单元的经纬度均有才能添加，否则无法在地图中显示
          if (item && item.longitude && item.latitude) {
            //在单元信息属性中添加任务数量，默认任务数量为0
            let taskCount = 0x0;
            let finishCount = 0x0;
            let notFinishCount = 0x0;
            if (unitIds && unitIds.length > 0x0) {
              let unitIndex = unitIds.indexOf(item.unitid);
              if (unitIndex >= 0x0) {
                taskCount = taskCounts[unitIndex];
                finishCount = finishCounts[unitIndex];
                notFinishCount = notFinishCounts[unitIndex];
              }
            }
            seriesData.push({
              name: item.unitname,
              //使用3D柱状图设置的数据只能在value中设置，固定数组的顺序为：精度、纬度、数据值
              value: [item.longitude, item.latitude, taskCount, finishCount, notFinishCount],
              property: item, //额外增加property属性，用于在点击时获取单元信息
            });
            finishSeriesData.push({
              name: item.unitname,
              //使用3D柱状图设置的数据只能在value中设置，固定数组的顺序为：精度、纬度、数据值
              value: [item.longitude, item.latitude, finishCount],
              property: item, //额外增加property属性，用于在点击时获取单元信息
            });
            notFinishSeriesData.push({
              name: item.unitname,
              //使用3D柱状图设置的数据只能在value中设置，固定数组的顺序为：精度、纬度、数据值
              value: [item.longitude, item.latitude, notFinishCount],
              property: item, //额外增加property属性，用于在点击时获取单元信息
            });
          }
        });
        console.log('addTaskLayerToMap seriesData', seriesData);

        const myOption = mapContainer.getOption();
        //构造1个3D柱状图Series对象，显示所有任务数量；实测使用堆叠柱状图无法显示不同颜色，叠加会颜色重合
        let series = {
          name: mapLayerTaskName.value,
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          geoIndex: 0,
          shading: 'lambert',
          label: {
            show: true,
            position: 'top', // 可以选择显示在顶部、底部等位置
            offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
            distance: 0, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
            rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
            //在使用富文本标签时，formatter 函数返回的字符串中使用了 {a|...} 的形式来定义文本样式。其中 a 是样式名称，在 rich 中定义
            formatter: function (params) {
              // return `{a|${params.name}\r\n危险源数量：${params.value[2]}}`; // 只显示z轴的值，并自定义样式
              return `{a|${params.value[2]}}`; // 只显示z轴的值，并自定义样式
            },
            rich: {
              a: {
                //文字显示背景色和背景圆角框
                backgroundColor: 'rgba(255,255,255,0.7)',
                borderRadius: 4,
                color: '#000',
                fontSize: 14,
                padding: 3,
                boxShadowBlur: 4, // 阴影模糊大小
                shadowColor: 'rgba(0,0,0,0.3)', // 阴影颜色
              },
            },
          },
          data: seriesData, //convertData(addBarSeriesPoints, geoJsonFeatures),
          barSize: 1,
          minHeight: 1, //设置最小高度为1以在地图中突出显示，没有柱子高度时无法触发鼠标移至事件
          itemStyle: {
            color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
            // color: '#FFB239', //柱子颜色为金黄色
          },
          emphasis: {
            label: { show: true },
          },
          zlevel: mapAddLayerzIndex, //设置为显示的底图之上
        };
        //构造1个3D柱状图Series对象，显示已完成任务数量
        let finishSeries = {
          name: mapLayerTaskName.value,
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          geoIndex: 0,
          shading: 'lambert',
          label: {
            show: true,
            position: 'top', // 可以选择显示在顶部、底部等位置
            offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
            distance: 0, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
            rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
            //在使用富文本标签时，formatter 函数返回的字符串中使用了 {a|...} 的形式来定义文本样式。其中 a 是样式名称，在 rich 中定义
            formatter: function (params) {
              // return `{a|${params.name}\r\n危险源数量：${params.value[2]}}`; // 只显示z轴的值，并自定义样式
              return `{a|${params.value[2]}}`; // 只显示z轴的值，并自定义样式
            },
            rich: {
              a: {
                //文字显示背景色和背景圆角框
                backgroundColor: 'rgba(255,255,255,0.7)',
                borderRadius: 4,
                color: '#000',
                fontSize: 14,
                padding: 3,
                boxShadowBlur: 4, // 阴影模糊大小
                shadowColor: 'rgba(0,0,0,0.3)', // 阴影颜色
              },
            },
          },
          data: finishSeriesData, //convertData(addBarSeriesPoints, geoJsonFeatures),
          barSize: 1,
          minHeight: 1, //设置最小高度为1以在地图中突出显示，没有柱子高度时无法触发鼠标移至事件
          itemStyle: {
            color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
            // color: '#FFB239', //柱子颜色为金黄色
          },
          emphasis: {
            label: { show: true },
          },
          zlevel: mapAddLayerzIndex, //设置为显示的底图之上
        };
        //构造1个3D柱状图Series对象，显示未完成任务数量
        let notFinishSeries = {
          name: mapLayerTaskName.value + 'notfinish',
          stack: mapLayerTaskName.value, //堆积图，让未完成数量柱子堆叠在已完成柱子上
          stackStrategy: 'all',
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          geoIndex: 0,
          shading: 'lambert',
          label: {
            show: true,
            position: 'top', // 可以选择显示在顶部、底部等位置
            offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
            distance: 0, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
            rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
            //在使用富文本标签时，formatter 函数返回的字符串中使用了 {a|...} 的形式来定义文本样式。其中 a 是样式名称，在 rich 中定义
            formatter: function (params) {
              // return `{a|${params.name}\r\n危险源数量：${params.value[2]}}`; // 只显示z轴的值，并自定义样式
              return `{a|${params.value[2]}}`; // 只显示z轴的值，并自定义样式
            },
            rich: {
              a: {
                //文字显示背景色和背景圆角框
                backgroundColor: 'rgba(255,255,255,0.7)',
                borderRadius: 4,
                color: '#000',
                fontSize: 14,
                padding: 3,
                boxShadowBlur: 4, // 阴影模糊大小
                shadowColor: 'rgba(0,0,0,0.3)', // 阴影颜色
              },
            },
          },
          data: notFinishSeriesData, //convertData(addBarSeriesPoints, geoJsonFeatures),
          barSize: 1,
          minHeight: 1, //设置最小高度为1以在地图中突出显示，没有柱子高度时无法触发鼠标移至事件
          itemStyle: {
            // color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
            color: '#FFB239', //柱子颜色为金黄色
          },
          emphasis: {
            label: { show: true },
          },
          zlevel: mapAddLayerzIndex, //设置为显示的底图之上
        };
        // console.log('addTaskLayerToMap series', series);
        //设置option中的标题
        myOption.title[0].text = '任务分布图';
        //加入到option的series中
        myOption.series.push(series);
        // myOption.series.push(finishSeries);
        // myOption.series.push(notFinishSeries);
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);
        console.log('addTaskLayerToMap setOption', myOption);

        //修改图层显隐状态标识
        mapLayerOptions.showTaskLayer = true;

        //显示单元图层后显示提示信息
        notification.success({
          message: t('操作成功'),
          description: `已成功加载任务图层显示。`,
          duration: 2,
        });
      }

      /*
       * 地图图层-人员显隐切换
       */
      function onMapStaffLayerButtonClick() {
        //图层显隐切换前先重置地图的选中对象和叠加的信息显示区域
        resetMapSelectedAndInfoArea();

        let showFlag = mapLayerOptions.showStaffLayer;
        //判断本次操作是要显示还是隐藏
        if (showFlag === true) {
          //当前是显示状态，设置为隐藏
          removeStaffLayerFromMap();

          //隐藏图层后显示提示信息
          notification.success({
            message: t('操作成功'),
            description: `已成功卸载人员图层。`,
            duration: 2,
          });
        } else {
          //当前是隐藏状态，设置为显示
          //设置其他图层不显示
          removeUnitLayerFromMap();
          removeHazardLayerFromMap();
          removeTroubleLayerFromMap();
          removeTaskLayerFromMap();
          // removeStaffLayerFromMap();
          removeCameraLayerFromMap();
          //显示人员图层，每次进行人员位置的查询
          addStaffLayerToMap();
        }
      }

      /*
       * 地图图层中移除人员图层
       */
      function removeStaffLayerFromMap() {
        const myOption = mapContainer.getOption();
        let seriesIndex = -1; //记录图层对应series中的索引序号，为-1表示不存在
        if (myOption && myOption.series && myOption.series.length > 0x0) {
          for (let index = 0; index < myOption.series.length; index++) {
            //获取series中判断是否有name为当前图层的序列并获取索引序号
            if (myOption.series[index].name === mapLayerStaffName.value) {
              seriesIndex = index;
              break;
            }
          }
        }
        if (seriesIndex >= 0x0) {
          //设置option中的标题
          myOption.title[0].text = '';
          //splice方法，指定起始索引和删除元素数量
          myOption.series.splice(seriesIndex, 0x1);
          //调用echarts的setOption更新地图显示
          mapContainer && mapContainer.setOption(myOption, true);
          console.log('removeStaffLayerFromMap setOption', myOption);
        }
        //修改图层显隐状态标识
        mapLayerOptions.showStaffLayer = false;
      }

      /*
       * 地图图层中添加人员图层显示
       */
      function addStaffLayerToMap() {
        //序列的data数据集赋值
        let seriesData = [];

        //构造查询最新签到记录的查询条件
        //查询人员签到记录的起始时间设置为当前时间往前7天
        let queryBeginTime = moment().startOf('day').subtract(7, 'days').format('YYYY-MM-DD');
        let condition: StaffSignInQueryConditionDto = {
          orgcode: ehsOrg.orgcode,
          begintm: queryBeginTime, //指定查询最近n天的签到记录
          //截止时间、单元、用户、任务项均不指定
        };
        queryLatest(condition)
          .then((res) => {
            console.log('queryLatest res', res);
            //模拟数据：使用单元数据集合添加为人员数据
            // units.forEach((item) => {
            //   //在map3D中添加1个series；其中data属性为：{name:xxx,value:[经度,纬度,数据数值]}
            //   //判断如果单元的经纬度均有才能添加，否则无法在地图中显示
            //   if (item && item.longitude && item.latitude) {
            //     seriesData.push({
            //       name: item.unitname,
            //       value: [item.longitude, item.latitude],
            //       property: item, //额外增加property属性，用于在点击时获取签到信息
            //     });
            //   }
            // });
            if (res && res.length > 0x0) {
              res.forEach((item) => {
                if (item && item.longitude && item.latitude) {
                  //判断签到记录中的经纬度，有经纬度信息才能显示在地图上
                  seriesData.push({
                    name: item.username, //显示签到用户名称
                    value: [item.longitude, item.latitude],
                    property: item, //额外增加property属性，用于在点击时获取签到信息
                  });
                }
              });
            }
            const myOption = mapContainer.getOption();
            //构造单元的3D散点图Series对象
            let series = {
              name: mapLayerStaffName.value,
              type: 'scatter3D',
              coordinateSystem: 'geo3D',
              geoIndex: 0,
              zlevel: mapAddLayerzIndex, //设置为显示的底图之上，底图设置为-10
              itemStyle: {
                color: 'rgb(147, 235, 248)',
                // color: '#FFCC00',
                // color: '#000000',
                opacity: 1,
                borderWidth: 1,
                borderColor: '#ffffff',
              },
              // symbol: 'circle',
              //定位图标
              // symbol:
              //   'path://M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z',
              //人形图标
              symbol:
                'path://M632.855273 565.992727c101.771636-47.080727 172.590545-149.317818 172.590545-267.869091 0-163.118545-133.678545-295.842909-298.007273-295.842909C343.202909 2.280727 209.454545 135.005091 209.454545 298.077091c0 118.597818 70.842182 220.834909 172.590545 267.915636C188.020364 622.336 44.311273 805.329455 38.469818 1024l46.615273 0 844.753455 0 46.638545 0C970.612364 805.329455 826.926545 622.336 632.855273 565.992727z',
              symbolSize: [12, 15, 10], //宽，高，xx
              // symbolSize: [10, 30],
              data: seriesData,
              //设置直接在图标上方显示对应的数据值
              label: {
                show: true,
                position: 'top', // 可以选择显示在顶部、底部等位置
                // offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
                distance: 5, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
                rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
                formatter: function (params) {
                  //显示人员名称
                  return params.data.name;
                },
                //通过显式设置textStyle覆盖echarts设置的默认值
                textStyle: {
                  //文字显示背景色和背景圆角框
                  backgroundColor: 'rgba(255,255,255,0.7)',
                  borderRadius: 4,
                  color: '#000',
                  fontSize: 14,
                  padding: 3,
                },
              },
            };
            //设置option中的标题
            myOption.title[0].text = '人员签到定位图';
            //加入到option的series中
            myOption.series.push(series);
            //调用echarts的setOption更新地图显示
            mapContainer && mapContainer.setOption(myOption, true);
            console.log('addStaffLayerToMap setOption', myOption);

            //修改图层显隐状态标识
            mapLayerOptions.showStaffLayer = true;

            //显示单元图层后显示提示信息
            notification.success({
              message: t('操作成功'),
              description: `已成功加载人员图层显示。`,
              duration: 2,
            });
          })
          .catch((ex) => {
            createErrorModal({
              title: t('sys.api.errorTip'),
              content: ex,
              getContainer: () => document.body,
            });
          });
      }

      /*
       * 地图图层-摄像头显隐切换
       */
      function onMapCameraLayerButtonClick() {
        //图层显隐切换前先重置地图的选中对象和叠加的信息显示区域
        resetMapSelectedAndInfoArea();

        let showFlag = mapLayerOptions.showCameraLayer;
        //判断本次操作是要显示还是隐藏
        if (showFlag === true) {
          //当前是显示状态，设置为隐藏
          removeCameraLayerFromMap();

          //隐藏图层后显示提示信息
          notification.success({
            message: t('操作成功'),
            description: `已成功卸载摄像头图层。`,
            duration: 2,
          });
        } else {
          //当前是隐藏状态，设置为显示
          //设置其他图层不显示
          removeUnitLayerFromMap();
          removeHazardLayerFromMap();
          removeTroubleLayerFromMap();
          removeTaskLayerFromMap();
          removeStaffLayerFromMap();
          // removeCameraLayerFromMap();
          //显示摄像头图层，每次进行摄像头信息的查询
          addCameraLayerToMap();
        }
      }

      /*
       * 地图图层中移除摄像头图层
       */
      function removeCameraLayerFromMap() {
        const myOption = mapContainer.getOption();
        let seriesIndex = -1; //记录图层对应series中的索引序号，为-1表示不存在
        if (myOption && myOption.series && myOption.series.length > 0x0) {
          for (let index = 0; index < myOption.series.length; index++) {
            //获取series中判断是否有name为当前图层的序列并获取索引序号
            if (myOption.series[index].name === mapLayerCameraName.value) {
              seriesIndex = index;
              break;
            }
          }
        }
        if (seriesIndex >= 0x0) {
          //设置option中的标题
          myOption.title[0].text = '';
          //splice方法，指定起始索引和删除元素数量
          myOption.series.splice(seriesIndex, 0x1);
          //调用echarts的setOption更新地图显示
          mapContainer && mapContainer.setOption(myOption, true);
          console.log('removeCameraLayerFromMap setOption', myOption);
        }
        //修改图层显隐状态标识
        mapLayerOptions.showCameraLayer = false;
      }

      /*
       * 地图图层中添加摄像头图层显示
       */
      function addCameraLayerToMap() {
        //序列的data数据集赋值
        let seriesData = [];

        //构造摄像头信息的查询条件
        let condition: CameraQueryConditionDto = {
          orgcode: ehsOrg.orgcode,
          //单元和关键字保持为空
        };
        queryCameras(condition)
          .then((res) => {
            console.log('queryCameras res', res);
            //模拟数据：使用单元数据集合作为摄像头模拟数据
            // units.forEach((item) => {
            //   //在map3D中添加1个series；其中data属性为：{name:xxx,value:[经度,纬度,数据数值]}
            //   //判断如果单元的经纬度均有才能添加，否则无法在地图中显示
            //   if (item && item.longitude && item.latitude) {
            //     seriesData.push({
            //       name: item.unitname,
            //       value: [item.longitude, item.latitude],
            //       property: item, //额外增加property属性，用于在点击时获取摄像头信息
            //     });
            //   }
            // });
            if (res && res.length > 0x0) {
              res.forEach((item) => {
                if (item && item.longitude && item.latitude) {
                  //判断签到记录中的经纬度，有经纬度信息才能显示在地图上
                  //2025-6-26，实测发现在seriesData数量较少（如小于3个）时地图上鼠标移至无法选中，也无法触发点击事件
                  //参考该文档也无法解决https://blog.csdn.net/lilycheng1986/article/details/124793014
                  seriesData.push({
                    name: item.name, //显示摄像头的名称
                    value: [item.longitude, item.latitude],
                    property: item, //额外增加property属性，用于在点击时获取摄像头信息
                  });
                }
              });
            }
            const myOption = mapContainer.getOption();
            //构造3D散点图Series对象
            let series = {
              name: mapLayerCameraName.value,
              type: 'scatter3D',
              coordinateSystem: 'geo3D',
              geoIndex: 0,
              zlevel: mapAddLayerzIndex, //设置为显示的底图之上，底图设置为-10
              itemStyle: {
                color: 'rgb(147, 235, 248)',
                // color: '#FFCC00',
                // color: '#000000',
                opacity: 1,
                borderWidth: 1,
                borderColor: '#ffffff',
              },
              // symbol: 'circle',
              //定位图标
              // symbol:
              //   'path://M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z',
              //人形图标
              // symbol:
              //   'path://M632.855273 565.992727c101.771636-47.080727 172.590545-149.317818 172.590545-267.869091 0-163.118545-133.678545-295.842909-298.007273-295.842909C343.202909 2.280727 209.454545 135.005091 209.454545 298.077091c0 118.597818 70.842182 220.834909 172.590545 267.915636C188.020364 622.336 44.311273 805.329455 38.469818 1024l46.615273 0 844.753455 0 46.638545 0C970.612364 805.329455 826.926545 622.336 632.855273 565.992727z',
              //相机
              // symbol:
              //   'path://M931.52 338.24c-86.4-34.56-104-35.84-112-55.68l-37.76-94.08A96 96 0 0 0 692.8 128h-361.6a96 96 0 0 0-88.96 60.48L204.48 282.56c-8 19.84-25.6 21.12-112 55.68A96 96 0 0 0 32 427.2V800a96 96 0 0 0 96 96h768a96 96 0 0 0 96-96V427.2a96 96 0 0 0-60.48-88.96zM512 768a192 192 0 1 1 192-192 192 192 0 0 1-192 192z',
              // symbolSize: [25, 15, 0], //宽，高，xx
              //摄像机
              symbol:
                'path://M896 305.066667a72.533333 72.533333 0 0 0-78.933333 12.8l-91.733334 85.333333V341.333333a128 128 0 0 0-128-128H213.333333a128 128 0 0 0-128 128v341.333334a128 128 0 0 0 128 128h384a128 128 0 0 0 128-128v-61.866667l92.16 85.333333a74.24 74.24 0 0 0 49.493334 19.2 71.68 71.68 0 0 0 29.44-6.4 68.266667 68.266667 0 0 0 42.666666-63.146666V368.213333A68.266667 68.266667 0 0 0 896 305.066667z',
              symbolSize: [25, 15, 20], //宽，高，xx
              // symbolSize: [10, 10, 10], //宽，高，xx
              data: seriesData,
              //设置直接在图标上方显示对应的数据值
              label: {
                show: true,
                position: 'right', // 可以选择显示在顶部、底部等位置
                // offset: [0, 0], //通过offset设置控制label与柱状图距离和位置无效
                distance: 5, // 控制距离，增加此值可以使得标签更远离柱子，从而在视觉上增加间距感
                rotate: 0, // 控制旋转角度，可以根据需要调整以优化显示效果
                formatter: function (params) {
                  //显示摄像头名称
                  return params.data.name;
                },
                //通过显式设置textStyle覆盖echarts设置的默认值
                textStyle: {
                  //文字显示背景色和背景圆角框
                  backgroundColor: 'rgba(255,255,255,0.7)',
                  borderRadius: 4,
                  color: '#000',
                  fontSize: 14,
                  padding: 3,
                },
              },
            };
            //设置option中的标题
            myOption.title[0].text = '安全监控摄像头分布图';
            //加入到option的series中
            myOption.series.push(series);
            //调用echarts的setOption更新地图显示
            mapContainer && mapContainer.setOption(myOption, true);
            console.log('addCameraLayerToMap setOption', myOption);

            //修改图层显隐状态标识
            mapLayerOptions.showCameraLayer = true;

            //显示单元图层后显示提示信息
            notification.success({
              message: t('操作成功'),
              description: `已成功加载摄像头图层显示。`,
              duration: 2,
            });
          })
          .catch((ex) => {
            createErrorModal({
              title: t('sys.api.errorTip'),
              content: ex,
              getContainer: () => document.body,
            });
          });
      }

      /*
       * 打开AI知识库对话窗口
       */
      function onAIChatButtonClick() {
        openAIChatDrawer(true);
      }

      /*
       * 地图图层-不同类型任务图层显隐切换
       */
      const onMapTaskLayerMenuClick: MenuProps['onClick'] = (e) => {
        //图层显隐切换前先重置地图的选中对象和叠加的信息显示区域
        resetMapSelectedAndInfoArea();

        console.log('onMapTaskLayerMenuClick', e);
        //获取点击的任务类型编码，1=自查、2=设备设施维保、4=隐患治理、8=检查/督查、16=作业活动
        let taskTypeCode = e.key;
      };

      /*
       * 单元全景图查看按钮点击，每次点击都是显示
       */
      function onViewUnitPanoramaButtonClick(title, fileId, fileUrl) {
        console.log(
          'onViewUnitPanoramaButtonClick title=' +
            title +
            ' fileId=' +
            fileId +
            ' fileUrl=' +
            fileUrl,
        );
        //文件ID必须有效才能进行查看
        if (fileId && fileId > 0x0) {
          //本次点击的全景图ID有效时才进行判断处理
          //显示本次点击的全景图
          let intFileId = Number.parseInt(fileId);
          //url要赋值为完整路径
          let fileFullUrl = getImageFileUrlPrefix.value + fileUrl;

          frontAreaState.showPopupArea = true;

          //构造父组件给子组件传值对象
          let propsData: QcUnifyTransToChildProps = {
            moduleName: title ? title : '查看全景图', //如果标题文字不为空则使用标题文字
            operateType: OperationTypeEnum.VIEW,
            dataId: intFileId,
          };
          openUnitPanoramaViewModal(true, propsData);
        }
      }

      /*
       * 单元视频静态信息查看按钮点击
       */
      function onViewUnitVideoStaticInfoButtonClick(title, fileId, fileUrl) {
        console.log(
          'onViewUnitVideoStaticInfoButtonClick title=' +
            title +
            ' fileId=' +
            fileId +
            ' fileUrl=' +
            fileUrl,
        );
        //文件ID必须有效才能进行查看
        if (fileId && fileId > 0x0) {
          //本次点击的全景图ID有效时才进行判断处理
          //显示本次点击的全景图
          let intFileId = Number.parseInt(fileId);
          //url要赋值为完整路径
          let fileFullUrl = getImageFileUrlPrefix.value + fileUrl;

          frontAreaState.showPopupArea = true;

          //构造父组件给子组件传值对象
          let propsData: QcUnifyTransToChildProps = {
            moduleName: title ? title : '查看视频', //如果标题文字不为空则使用标题文字
            operateType: OperationTypeEnum.VIEW,
            dataId: intFileId,
          };
          openUnitVideoViewModal(true, propsData);
        }
      }

      /*
       * 地图开发测试按钮点击事件
       */
      function onMapTestButtonClick() {
        let mapOption = mapContainer.getOption();
        //动态修改option中的属性值
        //geo3D[0].viewControl中的distance无效；地图缩放时该属性不发生改变；因为在初始化地图时设置geo3D不显示;
        // console.log('mapOption.geo3D', mapOption.geo3D);
        // console.log('mapOption.geo3D[0]', mapOption.geo3D[0]);
        console.log('mapOption.geo3D[0].viewControl', mapOption.geo3D[0].viewControl);
        // console.log(
        //   'mapOption.geo3D[0].viewControl.distance',
        //   mapOption.geo3D[0].viewControl.distance,
        // );
        //通过设置geo3D中的viewControl.distance无效，提示： Cannot set properties of undefined (setting 'distance')
        // mapOption.geo3D[0].viewControl.distance = 20;
        //通过设置series中viewControl.distance有效
        // console.log(
        //   ' mapOption.series[0].viewControl.distance',
        //   mapOption.series[0].viewControl.distance,
        // );
        // mapOption.series[0].viewControl.distance = 20;

        //调用echarts的setOption更新地图显示
        // mapContainer && mapContainer.setOption(mapOption, true);

        //缩放后叠加的series位置会发生偏移
        //2025-5-27，实测无效，zoom和center会始终不变，只有distance会随着缩放发生变化
        // let geo0zoom = mapOption.geo[0].zoom;
        // let geo0center = mapOption.geo[0].center;
        // console.log('geo0zoom', geo0zoom);
        // console.log('geo0center', geo0center);

        // let series0zoom = mapOption.series[0].zoom;
        // let series0center = mapOption.series[0].center;
        // console.log('series0zoom', series0zoom);
        // console.log('series0center', series0center);

        // mapOption.series[1].zoom = series0zoom;
        // mapOption.series[1].center = series0center;
        // mapContainer.setOption(mapOption);
        // addCustomLineToMap();//2025-6-3实测功能正常
        // addCustomAreaToMap();
        //当前地图中的series
        // console.log('onMapTestButtonClick mapOption.series', mapOption.series);
        //测试弹出右下角的AI对话框
        // openAIChatDrawer(true);
      }

      //点击按钮返回到中国地图显示
      function onBackToChinaButtonClick() {
        console.log('onBackToChinaButtonClick');
        let n = 'china';
        let c = '100000';
        initMap(n, c);
      }

      //添加自定义线条数据到地图中，用于添加河流水系或道路使用
      function addCustomLineToMap() {
        const myOption = mapContainer.getOption();

        //构造线条数据，经纬度坐标集合
        let coordinates = [
          [103.78559411916439, 23.738827265255765],
          [103.96830335603869, 23.737137236887946],
          [104.14361036629015, 23.706744111507064],
          [104.25076102784095, 23.39186617472862],
        ];
        let lineData = [];
        //需要遍历线条上的点，每个获取当前点坐标和下一个点坐标以进行线条的绘制
        for (let i = 0; i < coordinates.length; i++) {
          const nextIndex = i + 1;
          if (nextIndex < coordinates.length) {
            const coord1 = coordinates[i];
            const coord2 = coordinates[nextIndex];
            const coords = [coord1, coord2];
            lineData.push({
              coords,
            });
          }
        }

        let series = {
          type: 'lines3D',
          polyline: true,
          coordinateSystem: 'geo3D',
          lineStyle: {
            color: '#349ef4',
            opacity: 1,
            width: 13,
          },
          zlevel: 2,
          effect: {
            show: true,
            period: 2,
            trailWidth: 11,
            trailLength: 0.5,
            trailColor: '#47e3e5',
          },
          blendMode: 'source-over',
          data: lineData,
        };

        //加入到option的series中
        myOption.series.push(series);
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);
        console.log('addCustomLineToMap setOption', myOption);
      }

      //添加自定义区域数据到地图中
      function addCustomAreaToMap() {
        const myOption = mapContainer.getOption();

        //构造线条数据，经纬度坐标集合
        let coordinates = [
          [104.26346682409763, 23.642786748574366],
          [104.26346682409763, 23.551470268381607],
          [104.45167735480726, 23.551470268381607],
          [104.45167735480726, 23.642786748574366],
          [104.26346682409763, 23.642786748574366],
        ];
        let seriesData = [];
        //可以添加多个区域
        seriesData.push({ coords: coordinates, height: 3 });

        //测试使用polygons3D添加区域，polygons3D为平面xy坐标系，无法使用
        // let series = {
        //   type: 'polygons3D',
        //   multiPolygon: false,
        //   itemStyle: {
        //     color: '#ffffff',
        //     opacity: 1,
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       color: '#000',
        //       opacity: 1,
        //     },
        //   },
        //   data: seriesData,
        // };

        //可以显示出来，但由于2个地图的区域不一样大，设置视角相同时显示错乱
        // let series = {
        //   type: 'map3D', //type只能是map3D
        //   roam: true,
        //   // aspectScale: 1, //长宽比
        //   animation: false,
        //   center: undefined,
        //   // zoom: 1,
        //   map: 'testregion', //'文山州', //指定使用的地图图层名称，必须与 echarts.registerMap中指定的名称完全一致
        //   // scaleLimit: {
        //   //   min: 1,
        //   //   max: 5,
        //   // },
        //   zlevel: 25, //设置显示底层
        //   regionHeight: 1, //三维地图每个区域的高度，设置后对每个区域均有效，可以通过data中的相同属性进行分区域控制
        //   //地图的颜色
        //   itemStyle: {
        //     // color: '#2AB8FF', // 地图板块的颜色，蓝绿色
        //     // color: '#013954', // 地图板块的颜色，浅蓝色
        //     color: '#ffffff', // 地图板块的颜色，浅蓝色
        //     // color: 'rgb(147, 235, 248)',
        //     opacity: 0.8, // 图形的不透明度 [ default: 1 ]
        //     // borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
        //     // borderColor: '#286ECA', // 图形描边的颜色。[ default: #333 ]
        //     //图形的描边颜色
        //     borderColor: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
        //     borderWidth: 2,
        //     //阴影水平、垂直方向上的偏移距离；设置后会有立体效果
        //     shadowOffsetX: 10,
        //     shadowOffsetY: 10,
        //     //图形阴影的模糊大小
        //     shadowBlur: 10,
        //   },
        //   emphasis: {
        //     // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
        //     label: {
        //       // label 高亮时的配置
        //       show: true,
        //       // 标签的字体样式
        //       color: '#fff', // 高亮时标签颜色变为 白色
        //       fontSize: 18, // 高亮时标签字体 变大
        //     },
        //     itemStyle: {
        //       // itemStyle 高亮时的配置
        //       areaColor: '#66ffff', // 高亮时地图板块颜色改变
        //     },
        //   },
        //   groundPlane: {
        //     // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
        //     show: false, // 是否显示地面。[ default: false ]
        //     color: '#aaa', // 地面颜色。[ default: '#aaa' ]
        //   },
        //   // shading: 'lambert', //三维地图中三维图形的着色效果，取值为：color、lambert、realistic
        //   light: {
        //     // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
        //     main: {
        //       // 场景主光源的设置，在 globe 组件中就是太阳光。
        //       color: '#3D94CE', // 主光源的颜色。[ default: #fff ]
        //       intensity: 1.2, // 主光源的强度。[ default: 1 ]
        //       shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
        //       // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
        //       alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
        //       beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
        //     },
        //     ambient: {
        //       // 全局的环境光设置。
        //       // color: 'red', // 环境光的颜色。[ default: #fff ]
        //       intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
        //     },
        //   },
        //   // data: seriesData,
        // };

        let regionStyleData = [
          // 可对单个地图区域进行设置
          {
            name: '丘北县',
            // value: inputData[2],
            itemStyle: {
              // 单个区域的样式设置
              color: '#e78078',
            },
          },
          {
            name: '西畴县',
            // value: inputData[4],
            itemStyle: {
              // 单个区域的样式设置
              color: '#98a3af',
            },
          },
          {
            name: '马关县',
            // value: inputData[3],
            itemStyle: {
              // 单个区域的样式设置
              color: '#3f93d3',
            },
          },
          {
            name: '砚山县',
            // value: inputData[5],
            itemStyle: {
              // 单个区域的样式设置
              color: '#12c0ae',
            },
          },
        ];

        // let series = {
        //   name: 'customRegion',
        //   type: 'map3D',
        //   map: '文山州', //必须和上面注册的地图名称一致，详细可以看ECharts的GL配置说明
        //   boxDepth: 100, //地图倾斜度
        //   regionHeight: 2, //地图厚度
        //   light: {
        //     main: {
        //       intensity: 1.5,
        //     },
        //   },
        //   label: {
        //     show: true, //是否显示市
        //     textStyle: {
        //       color: '#333333', //文字颜色
        //       fontSize: 16, //文字大小
        //       fontFamily: '微软雅黑',
        //       backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
        //     },
        //   },
        //   data: regionStyleData,
        //   itemStyle: {
        //     opacity: 1, // 透明度
        //     borderWidth: 1, //分界线宽度
        //     borderColor: '#808080', //分界线颜色
        //     color: '#ffffff',
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       color: '#D3D3D3',
        //     },
        //   },
        //   groundplane: {
        //     show: false,
        //   },
        //   shading: 'realistic',
        //   // 真实感材质相关配置 shading: 'realistic'时有效
        //   realisticMaterial: {
        //     detailTexture: '#fff', // 纹理贴图
        //     textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
        //     roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
        //     metalness: 0, // 0材质是非金属 ，1金属
        //     roughnessAdjust: 0,
        //   },
        // };

        //添加map3D均会导致出现2个地图叠加错乱问题，需要对geo3D数据中regions样式进行修改
        myOption.geo3D[0].regions = regionStyleData;
        //通过设置geo3D的regions成功，实现自定义区域的实现方式：通过制作1个要自定义显示区域的底图，在地图加载时进行加载（通过设置底图的顺序控制进行叠加）

        //同步2个map3D的视角
        // series.viewControl = myOption.geo3D[0].viewControl;
        //加入到option的series中
        // myOption.series.push(series);
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);
        console.log('addCustomAreaToMap setOption', myOption);
      }

      /*
       * 根据当前选中的对象获取要显示的信息
       */
      function getSelectedObjectInfo() {
        console.log('getSelectedObjectInfo mapLayerOptions', mapLayerOptions);
        //如果选中的图层name为空或者选中的对象ID为空，不进行对应对象信息的获取
        if (mapLayerOptions.selectedObjectLayerName && mapLayerOptions.selectedObjectId) {
          let objId = mapLayerOptions.selectedObjectId;
          //根据不同的图层name进行数据查询
          if (mapLayerOptions.selectedObjectLayerName === mapLayerUnitName.value) {
            //单元图层中选中单元
            //查询单元信息：单元基本信息已经通过property进行获取，查询单元的静态信息集合、查询单元的任务（检查/自查）和隐患治理信息
            if (mapLayerOptions.selectedObject) {
              //设置单元的介绍信息
              unit.basicinfo = mapLayerOptions.selectedObject;
              //选中单元时设置显示的系统标题对象名称为单元名称
              frontAreaState.showInSystemTitleObjectName = mapLayerOptions.selectedObject.unitname;
            }

            //加载与单元相关的基本信息、最新安全状态信息、静态信息
            //显示单元的最新安全状态信息
            loadUnitLatestStatus(objId);
            //显示单元的静态信息
            loadUnitStaticInfo(objId);
            //设置界面上中区域显示组织信息
            frontAreaState.showTopCenter = true;
            //设置左侧显示单元的静态信息
            frontAreaState.showLeftSide = true; //左侧显示单元的介绍、文字轮播、图片轮播
            frontAreaState.showRightSide = true; //右侧显示单元的任务和隐患治理信息
            frontAreaState.showBottomCenter = true; //底部中间显示单元的视频和全景图按钮
            //设置显示组织信息为false，显示单元信息为true
            frontAreaState.showOrgInfo = false;
            frontAreaState.showUnitInfo = true;
            frontAreaState.showUnitHazardsInfo = false;
            frontAreaState.showUnitHiddenTroublesInfo = false;
            frontAreaState.showUnitTaskInfo = false;

            //加载与单元相关的任务、隐患治理记录
            let queryBeginTime = moment().startOf('year').format('YYYY-MM-DD');
            let queryEndTime = moment().endOf('year').format('YYYY-MM-DD');
            //查询时间设置为当天
            queryEndTime = moment().endOf('day').format('YYYY-MM-DD');
            //查询单元的任务项集合
            loadUnitTaskItems(objId, queryBeginTime, queryEndTime);
            //查询单元的隐患治理集合
            loadUnitTroubleCorrects(objId, queryBeginTime, queryEndTime);
          } else if (mapLayerOptions.selectedObjectLayerName === mapLayerHazardName.value) {
            //危险源图层中选中单元
            //查询单元信息：单元基本信息已经通过property进行获取，查询单元的静态信息集合、查询单元的任务（检查/自查）和隐患治理信息
            if (mapLayerOptions.selectedObject) {
              //设置单元的介绍信息
              unit.basicinfo = mapLayerOptions.selectedObject;
              //选中单元时设置显示的系统标题对象名称为单元名称
              frontAreaState.showInSystemTitleObjectName = mapLayerOptions.selectedObject.unitname;
            }

            //显示单元的最新安全状态信息
            loadUnitLatestStatus(objId);
            //加载单元的危险源台账
            loadUnitHazards(objId);

            //设置叠加区域的显隐
            frontAreaState.showTopCenter = false;
            frontAreaState.showLeftSide = true; //左侧显示单元的危险源数量、风险等级图表
            frontAreaState.showRightSide = true; //右侧显示单元的任务和隐患治理信息
            frontAreaState.showBottomCenter = false; //底部中间显示单元的视频和全景图按钮
            //设置显示组织信息为false，显示单元信息为true
            frontAreaState.showOrgInfo = false;
            frontAreaState.showUnitInfo = false;
            frontAreaState.showUnitHazardsInfo = true;
            frontAreaState.showUnitHiddenTroublesInfo = false;
            frontAreaState.showUnitTaskInfo = false;

            //加载与单元相关危险源辨识记录和风险评价记录
            let queryBeginTime = moment().startOf('year').format('YYYY-MM-DD');
            let queryEndTime = moment().endOf('year').format('YYYY-MM-DD');
            //查询时间设置为当天
            queryEndTime = moment().endOf('day').format('YYYY-MM-DD');
            //查询单元的危险源辨识记录
            loadUnitHazardsIdentifyRecords(objId, queryBeginTime, queryEndTime);
            //查询单元的危险源风险评价记录
            loadUnitRiskEvaluationRecords(objId, queryBeginTime, queryEndTime);
          } else if (mapLayerOptions.selectedObjectLayerName === mapLayerTroubleName.value) {
            //隐患图层中选中单元
            //查询单元信息：单元基本信息已经通过property进行获取，查询单元的静态信息集合、查询单元的任务（检查/自查）和隐患治理信息
            if (mapLayerOptions.selectedObject) {
              //设置单元的介绍信息
              unit.basicinfo = mapLayerOptions.selectedObject;
              //选中单元时设置显示的系统标题对象名称为单元名称
              frontAreaState.showInSystemTitleObjectName = mapLayerOptions.selectedObject.unitname;
            }

            //显示单元的最新安全状态信息
            loadUnitLatestStatus(objId);
            //加载单元的隐患台账
            loadUnitHiddenTroubles(objId);

            //设置叠加区域的显隐
            frontAreaState.showTopCenter = false;
            frontAreaState.showLeftSide = true; //左侧显示单元的隐患和隐患治理整改统计数值和图表
            frontAreaState.showRightSide = true; //右侧显示单元的任务和隐患治理信息
            frontAreaState.showBottomCenter = false; //底部中间显示单元的视频和全景图按钮
            //设置显示组织信息为false，显示单元信息为true
            frontAreaState.showOrgInfo = false;
            frontAreaState.showUnitInfo = false;
            frontAreaState.showUnitHazardsInfo = false;
            frontAreaState.showUnitHiddenTroublesInfo = true;
            frontAreaState.showUnitTaskInfo = false;

            //加载与单元相关的隐患治理记录
            let queryBeginTime = moment().startOf('year').format('YYYY-MM-DD');
            let queryEndTime = moment().endOf('year').format('YYYY-MM-DD');
            //查询时间设置为当天
            queryEndTime = moment().endOf('day').format('YYYY-MM-DD');
            //查询单元的隐患治理集合
            loadUnitTroubleCorrects(objId, queryBeginTime, queryEndTime);
          } else if (mapLayerOptions.selectedObjectLayerName === mapLayerTaskName.value) {
            //任务图层中选中单元
            //查询单元信息：单元基本信息已经通过property进行获取，查询单元的静态信息集合、查询单元的任务（检查/自查）和隐患治理信息
            if (mapLayerOptions.selectedObject) {
              //设置单元的介绍信息
              unit.basicinfo = mapLayerOptions.selectedObject;
              //选中单元时设置显示的系统标题对象名称为单元名称
              frontAreaState.showInSystemTitleObjectName = mapLayerOptions.selectedObject.unitname;
            }

            //设置叠加区域的显隐
            frontAreaState.showTopCenter = false;
            frontAreaState.showLeftSide = false; //左侧无显示内容
            frontAreaState.showRightSide = true; //右侧显示单元的任务完成和分类统计图表、任务项轮播表
            frontAreaState.showBottomCenter = false; //底部中间显示单元的视频和全景图按钮
            //设置显示组织信息为false，显示单元信息为true
            frontAreaState.showOrgInfo = false;
            frontAreaState.showUnitInfo = false;
            frontAreaState.showUnitHazardsInfo = false;
            frontAreaState.showUnitHiddenTroublesInfo = false;
            frontAreaState.showUnitTaskInfo = true;

            //加载与单元相关的隐患治理记录
            let queryBeginTime = moment().startOf('year').format('YYYY-MM-DD');
            let queryEndTime = moment().endOf('year').format('YYYY-MM-DD');
            //查询时间设置为当天
            queryEndTime = moment().endOf('day').format('YYYY-MM-DD');
            //查询单元的任务项集合
            loadUnitTaskItems(objId, queryBeginTime, queryEndTime);
          } else if (mapLayerOptions.selectedObjectLayerName === mapLayerStaffName.value) {
            //查询人员信息
            console.log('getSelectedObjectInfo 打开人员窗口');
          } else if (mapLayerOptions.selectedObjectLayerName === mapLayerCameraName.value) {
            //查询摄像头信息
            console.log('getSelectedObjectInfo 打开摄像头窗口');
            //构造父组件给子组件传值对象
            let propsData: QcUnifyTransToChildProps = {
              moduleName: '查看视频', //如果标题文字不为空则使用标题文字
              operateType: OperationTypeEnum.VIEW,
              dataId: mapLayerOptions.selectedObjectId,
            };
            openLivePlayerModal(true, propsData);
          } else {
            console.log('getSelectedObjectInfo 打开其他图层窗口');
          }
        }
      }

      /*
       * 加载组织的最新安全状态，显示组织的当前风险值、各等级危险源和隐患数量
       */
      function loadOrgLatestStatus() {
        console.log('loadOrgLatestStatus ehsOrg', ehsOrg);
        if (ehsOrg && ehsOrg.orgcode) {
          getOrgLatestStatus(ehsOrg.orgcode)
            .then((res) => {
              if (res) {
                orgOrUnitLatestStatus.value = res;
                //测试不同风险预警值显示不同颜色
                // orgOrUnitLatestStatus.value.risk = 45;
                // orgOrUnitLatestStatus.value.risk = 65;
                // orgOrUnitLatestStatus.value.risk = 85;
                //设置界面上中区域显示组织信息
                frontAreaState.showInSystemTitleObjectName = ehsOrg.orgname;
                frontAreaState.showTopCenter = true;
                //设置显示组织信息为true，显示单元信息为false
                frontAreaState.showOrgInfo = true;
              }
            })
            .catch((ex) => {
              console.log('loadOrgLatestStatus catch', ex);
            });
        }
      }

      /*
       * 加载指定统计时间段内（按月、年）安全生产看板统计数据，显示组织的隐患治理、任务、危险源辨识、危险源评价、培训教育、资金投入、事故统计信息
       * 在点击组织的风险预警值时显示该详细信息
       */
      function loadOrgStatistics(begintm: string, endtm: string) {
        ///ehs/board/org
      }

      /*
       * 加载单元的最新安全状态，显示单元的当前风险值、各等级危险源和隐患数量
       */
      function loadUnitLatestStatus(unitid: string) {
        console.log('loadUnitLatestStatus unitid', unitid);
        if (unitid) {
          getUnitLatestStatus(unitid)
            .then((res) => {
              console.log('loadUnitLatestStatus res', res);
              if (res) {
                orgOrUnitLatestStatus.value = res;
                //测试不同风险预警值显示不同颜色
                // orgOrUnitLatestStatus.value.risk = 45;
                // orgOrUnitLatestStatus.value.risk = 65;
                // orgOrUnitLatestStatus.value.risk = 85;
                //对单元的危险源和隐患的4个风险等级图表数据进行赋值
                if (res.hazard) {
                  let unitHazardSts = res.hazard;
                  let riskLevelColors = ['#8ed4ff', '#ffee76', '#ff9f12', '#fa7f7c']; //设置分别使用4种颜色对应风险等级
                  let hazardRiskLevelSeriesData = [];
                  //判断是否有未评级的危险源，4个风险等级的危险源数量是否小于总数
                  let unknownRiskLevelCount = 0x0;
                  if (unitHazardSts.count > 0x0)
                    unknownRiskLevelCount =
                      unitHazardSts.count -
                      unitHazardSts.bluecount -
                      unitHazardSts.yellowcount -
                      unitHazardSts.orangecount -
                      unitHazardSts.redcount;
                  if (unknownRiskLevelCount > 0x0) {
                    //如果有未评级的危险源，颜色数组重新赋值，第1个添加白色表示未评级颜色
                    riskLevelColors = ['#ffffff', '#8ed4ff', '#ffee76', '#ff9f12', '#fa7f7c'];
                    hazardRiskLevelSeriesData.push({
                      name: '未评级',
                      value: unknownRiskLevelCount,
                    });
                  }
                  hazardRiskLevelSeriesData.push({
                    name: '低风险',
                    value: unitHazardSts.bluecount,
                  });
                  hazardRiskLevelSeriesData.push({
                    name: '一般风险',
                    value: unitHazardSts.yellowcount,
                  });
                  hazardRiskLevelSeriesData.push({
                    name: '较大风险',
                    value: unitHazardSts.orangecount,
                  });
                  hazardRiskLevelSeriesData.push({
                    name: '重大风险',
                    value: unitHazardSts.redcount,
                  });

                  let unitHazardRiskLevelEchartsOption = {
                    title: {
                      text: '风险等级统计',
                      subtext: '',
                      left: 'center',
                      //标题文字大小和颜色保持与大屏基础色一致
                      textStyle: {
                        color: '#75d1f0',
                        fontSize: '1.15rem',
                      },
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{a} <br/>{b} : {c} ({d}%)',
                    },
                    legend: {
                      show: false,
                      left: 'center',
                      top: 'bottom',
                      data: ['危险源风险等级'],
                    },
                    toolbox: {
                      show: false,
                      feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true },
                      },
                    },
                    color: riskLevelColors, //设置分别使用4种颜色对应风险等级
                    series: [
                      {
                        name: '危险源风险等级',
                        type: 'pie',
                        radius: [20, 60], //设置每个图形的大小
                        center: ['50%', '50%'], //设置每个图形的中心点
                        // roseType: 'radius',
                        itemStyle: {
                          borderRadius: 5,
                        },
                        label: {
                          show: false,
                        },
                        emphasis: {
                          label: {
                            show: true,
                          },
                        },
                        data: hazardRiskLevelSeriesData,
                      },
                    ],
                  };
                  //危险源风险等级图表选项赋值
                  unit.hazardRiskLevelEchartsOption = unitHazardRiskLevelEchartsOption;
                  console.log(
                    'loadUnitLatestStatus hazardRiskLevelEchartsOption',
                    unitHazardRiskLevelEchartsOption,
                  );
                }

                if (res.trouble) {
                  let unitTroubleSts = res.trouble;
                  let riskLevelColors = ['#8ed4ff', '#ffee76', '#ff9f12', '#fa7f7c']; //设置分别使用4种颜色对应风险等级
                  let troubleRiskLevelSeriesData = [];
                  //判断是否有为评级的隐患
                  let unknownRiskLevelCount = 0x0;
                  if (unitTroubleSts.count > 0x0)
                    unknownRiskLevelCount =
                      unitTroubleSts.count -
                      unitTroubleSts.bluecount -
                      unitTroubleSts.yellowcount -
                      unitTroubleSts.orangecount -
                      unitTroubleSts.redcount;
                  if (unknownRiskLevelCount > 0x0) {
                    //如果有未评级的危险源，颜色数组重新赋值，第1个添加白色表示未评级颜色
                    riskLevelColors = ['#ffffff', '#8ed4ff', '#ffee76', '#ff9f12', '#fa7f7c'];
                    troubleRiskLevelSeriesData.push({
                      name: '未评级',
                      value: unknownRiskLevelCount,
                    });
                  }
                  troubleRiskLevelSeriesData.push({
                    name: '低风险',
                    value: unitTroubleSts.bluecount,
                  });
                  troubleRiskLevelSeriesData.push({
                    name: '一般风险',
                    value: unitTroubleSts.yellowcount,
                  });
                  troubleRiskLevelSeriesData.push({
                    name: '较大风险',
                    value: unitTroubleSts.orangecount,
                  });
                  troubleRiskLevelSeriesData.push({
                    name: '重大风险',
                    value: unitTroubleSts.redcount,
                  });

                  let unitTroubleRiskLevelEchartsOption = {
                    title: {
                      text: '风险等级统计',
                      subtext: '',
                      left: 'center',
                      //标题文字大小和颜色保持与大屏基础色一致
                      textStyle: {
                        color: '#75d1f0',
                        fontSize: '1.15rem',
                      },
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{a} <br/>{b} : {c} ({d}%)',
                    },
                    legend: {
                      show: false,
                      left: 'center',
                      top: 'bottom',
                      data: ['隐患风险等级'],
                    },
                    toolbox: {
                      show: true,
                      feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true },
                      },
                    },
                    color: riskLevelColors, //设置分别使用4种颜色对应风险等级
                    series: [
                      {
                        name: '隐患风险等级',
                        type: 'pie',
                        radius: [20, 40], //设置每个图形的大小
                        center: ['50%', '50%'], //设置每个图形的中心点
                        // roseType: 'radius',
                        itemStyle: {
                          borderRadius: 5,
                        },
                        label: {
                          show: false,
                        },
                        emphasis: {
                          label: {
                            show: true,
                          },
                        },
                        data: troubleRiskLevelSeriesData,
                      },
                    ],
                  };

                  unit.troubleRiskLevelEchartsOption = unitTroubleRiskLevelEchartsOption;
                }
              }
            })
            .catch((ex) => {
              console.log('loadUnitLatestStatus catch', ex);
            });
        }
      }

      /*
       * 加载指定单元的静态信息，包含文字、图片、视频、全景图
       */
      function loadUnitStaticInfo(unitid: string) {
        console.log('loadUnitStaticInfo unitid', unitid);
        if (unitid) {
          //清空单元的静态信息
          unit.staticinfos = [];
          unit.textstaticinfos = [];
          unit.imagestaticinfos = [];
          unit.videostaticinfos = [];
          unit.panoramastaticinfos = [];

          queryUnitStaticInfo(unitid)
            .then((res) => {
              if (res && res.length > 0x0) {
                //根据静态信息类型进行过滤筛选，对文本和图片静态信息集合进行赋值
                unit.staticinfos = res;
                unit.textstaticinfos = res.filter((p) => p.infotype === 0x1); //文字静态信息类型为1
                unit.imagestaticinfos = res.filter((p) => p.infotype === 0x2); //图片静态信息类型为2
                unit.videostaticinfos = res.filter((p) => p.infotype === 0x3); //视频静态信息类型为3
                unit.panoramastaticinfos = res.filter((p) => p.infotype === 0x4); //全景图静态信息类型为4
              }
            })
            .catch((ex) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: ex,
                getContainer: () => document.body,
              });
            });
        }
      }

      /*
       * 加载指定单元的危险源集合，数据来源于危险源台账
       */
      function loadUnitHazards(unitid: string) {
        console.log('loadUnitHazards unitid', unitid);
        if (unitid) {
          //清空单元的第一类危险源轮播表数据
          unit.hazards = [];
          unit.hazardScrollTableConfig = {
            header: ['危险源名称', '风险等级'],
            data: [['暂无任何危险源。']],
            index: true,
            columnWidth: [50, 420, 80], //单位是px，宽度无法自适应
            align: ['center'],
            carousel: 'page',
          };
          //查询指定单元的第一类危险源
          getUnitHazards({ unitid: unitid })
            .then((res) => {
              console.log('getUnitHazards res', res);
              if (res && res.length > 0x0) {
                unit.hazards = res;
                let scrollTableConfigData = [];
                res.forEach((item) => {
                  //状态进行格式化输出：'<span style="color:#32c5e9;">行2列2</span>'
                  let riskString = '-';
                  if (item.risklevel === 0x1) riskString = '低风险';
                  else if (item.risklevel === 0x2) riskString = '一般风险';
                  else if (item.risklevel === 0x3) riskString = '较大风险';
                  else if (item.risklevel === 0x4) riskString = '重大风险';
                  scrollTableConfigData.push([item.title, riskString]);
                });
                //数据变更时，请生成新的props，不然组件将无法刷新状态
                unit.hazardScrollTableConfig = {
                  header: ['危险源名称', '风险等级'],
                  data: scrollTableConfigData,
                  index: true,
                  columnWidth: [50, 420, 80], //单位是px，宽度无法自适应
                  waitTime: 4000, //轮播时间间隔(ms)
                  align: ['center'],
                  carousel: 'page',
                };
                console.log(
                  'loadUnitHazards hazardScrollTableConfig',
                  unit.hazardScrollTableConfig,
                );
              }
            })
            .catch((ex) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: ex,
                getContainer: () => document.body,
              });
            });
        }
      }

      /*
       * 加载指定单元的隐患集合，数据来源于隐患台账
       */
      function loadUnitHiddenTroubles(unitid: string) {
        console.log('loadUnitHiddenTroubles unitid', unitid);
        if (unitid) {
          //清空单元的第二类危险源轮播表数据
          unit.hiddenTroubles = [];
          unit.hiddenTroubleScrollTableConfig = {
            header: ['现存隐患名称', '风险等级'],
            data: [['暂无任何隐患。']],
            index: true,
            columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
            align: ['center'],
            carousel: 'page',
          };
          //查询指定单元的第二类危险源
          getUnitHiddenTrouble({ unitid: unitid })
            .then((res) => {
              console.log('getUnitHiddenTrouble res', res);
              if (res && res.length > 0x0) {
                unit.hiddenTroubles = res;
                let scrollTableConfigData = [];
                res.forEach((item) => {
                  //状态进行格式化输出：'<span style="color:#32c5e9;">行2列2</span>'
                  let riskString = '-';
                  if (item.risklevel === 0x1) riskString = '低风险';
                  else if (item.risklevel === 0x2) riskString = '一般风险';
                  else if (item.risklevel === 0x3) riskString = '较大风险';
                  else if (item.risklevel === 0x4) riskString = '重大风险';
                  scrollTableConfigData.push([item.title, riskString]);
                });
                //数据变更时，请生成新的props，不然组件将无法刷新状态
                unit.hiddenTroubleScrollTableConfig = {
                  header: ['现存隐患名称', '风险等级'],
                  data: scrollTableConfigData,
                  index: true,
                  columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
                  // columnWidth: ['10%', '75%', '15%'],
                  waitTime: 4000, //轮播时间间隔(ms)
                  align: ['center'],
                  carousel: 'page',
                };
                console.log(
                  'loadUnitHiddenTroubles hiddenTroubleScrollTableConfig',
                  unit.hiddenTroubleScrollTableConfig,
                );
              }
            })
            .catch((ex) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: ex,
                getContainer: () => document.body,
              });
            });
        }
      }

      /*
       * 加载指定统计时间段内（按月、年）指定单元的安全生产看板统计数据，包括隐患治理、任务、危险源辨识、危险源评价统计信息
       * 在点击单元的风险预警值时显示该详细信息
       */
      function loadUnitStatistics(unitid: string, begintm: string, endtm: string) {
        //新增接口：/ehs/board/unit
      }

      /*
       * 加载指定时间段内指定单元的任务集合；根据查询结果统计自查、检查任务数量
       */
      function loadUnitTaskItems(unitid: string, begintm: string, endtm: string) {
        console.log('loadUnitTaskItems unitid', unitid);
        if (unitid) {
          //清空单元的任务集合数据
          unit.taskitems = [];
          unit.checktaskitemScrollTableConfig = {
            header: ['安全生产自查任务', '状态'],
            data: [['暂无自查任务。']],
            index: true,
            columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
            align: ['center'],
            carousel: 'page',
          };
          unit.taskitemScrollTableConfig = {
            header: ['安全生产任务', '状态'],
            data: [['暂无任务。']],
            index: true,
            columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
            align: ['center'],
            carousel: 'page',
          };

          //初始化echarts显示任务图表数据
          let unitTaskStatisticsEchartsOption = {
            title: {
              text: '本年任务统计',
              subtext: '',
              left: 'center',
              //标题文字大小和颜色保持与大屏基础色一致
              textStyle: {
                color: '#75d1f0',
                fontSize: '1.38rem',
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)',
            },
            legend: {
              show: false,
              left: 'center',
              top: 'bottom',
              data: ['任务完成统计', '任务分类统计'],
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            series: [
              {
                name: '任务完成统计',
                type: 'pie',
                radius: [20, 80], //设置每个图形的大小
                center: ['25%', '50%'], //设置每个图形的中心点
                stillShowZeroSum: true, //是否在数据和为0（一般情况下所有数据为0） 的时候仍显示扇区
                roseType: false, //是否展示成南丁格尔图，设置为boolean或string类型，'radius'、'area'
                itemStyle: {
                  borderRadius: 5,
                },
                label: {
                  show: false,
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
                data: [
                  { value: 0, name: '未完成' },
                  { value: 0, name: '已完成' },
                  { value: 0, name: '取消/终止' },
                ],
              },
              {
                name: '任务分类统计',
                type: 'pie',
                radius: [20, 80],
                center: ['75%', '50%'],
                stillShowZeroSum: true, //是否在数据和为0（一般情况下所有数据为0） 的时候仍显示扇区
                roseType: false, //是否展示成南丁格尔图，设置为boolean或string类型，'radius'、'area'
                itemStyle: {
                  borderRadius: 5,
                },
                label: {
                  show: false,
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
                data: [
                  { value: 0, name: '自查类' },
                  { value: 0, name: '设备设施类' },
                  { value: 0, name: '隐患治理类' },
                  { value: 0, name: '督查类' },
                  { value: 0, name: '作业活动类' },
                ],
              },
            ],
          };

          //构造查询单元任务的查询条件：任务项的状态为全部（包含待办和已办任务）
          let condition: TaskConsoleUnitTaskItemQueryConditionDto = {
            unitid: unitid,
            status: -1, //0-待办，1-已办，其他-全部
            begintm: begintm,
            endtm: endtm,
          };
          queryUnitTaskItem(condition)
            .then((res) => {
              console.log('queryUnitTaskItem res', res);
              unit.taskitems = res;
              //判断查询结果中的任务项集合不为空时根据任务大类进行分别处理
              if (res && res.length > 0x0) {
                //从查询的任务集合中筛选出自查类任务，构造出自查任务轮播表的数据
                //根据任务大类进行筛选：自查=1、设备设施维保=2、隐患治理=4、检查/督查=8、作业活动=16
                let checkItems = res.filter((p) => p.tasktype === 0x1);
                //自查类安全生产任务项集合，最终显示在界面中的表格数据
                if (checkItems && checkItems.length > 0x0) {
                  let scrollTableConfigData = [];
                  checkItems.forEach((item) => {
                    //任务的状态进行格式化输出：'<span style="color:#32c5e9;">行2列2</span>'
                    let taskItemStatusString = '未完成';
                    if (item.hasend === true) {
                      taskItemStatusString = '终止/取消';
                    } else {
                      if (item.hasdispatch === false) {
                        taskItemStatusString = '未派单';
                      } else {
                        if (item.hasfinish === true) taskItemStatusString = '已完成';
                      }
                    }
                    scrollTableConfigData.push([item.itemname, taskItemStatusString]);
                  });
                  //数据变更时，请生成新的props，不然组件将无法刷新状态
                  unit.checktaskitemScrollTableConfig = {
                    header: ['安全生产自查任务', '状态'],
                    data: scrollTableConfigData,
                    index: true,
                    columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
                    // columnWidth: ['10%', '75%', '15%'],
                    waitTime: 4000, //轮播时间间隔(ms)
                    align: ['center'],
                    carousel: 'page',
                  };
                }
                console.log(
                  'loadUnitTaskItems checktaskitemScrollTableConfig',
                  unit.checktaskitemScrollTableConfig,
                );

                //所有类型的安全生产任务，构造轮播表数据
                let scrollTableConfigData = [];
                res.forEach((item) => {
                  //任务的状态进行格式化输出：'<span style="color:#32c5e9;">行2列2</span>'
                  let taskItemStatusString = '未完成';
                  if (item.hasend === true) {
                    taskItemStatusString = '终止/取消';
                  } else {
                    if (item.hasdispatch === false) {
                      taskItemStatusString = '未派单';
                    } else {
                      if (item.hasfinish === true) taskItemStatusString = '已完成';
                    }
                  }
                  scrollTableConfigData.push([item.itemname, taskItemStatusString]);
                });
                //数据变更时，请生成新的props，不然组件将无法刷新状态
                unit.taskitemScrollTableConfig = {
                  header: ['安全生产任务', '状态'],
                  data: scrollTableConfigData,
                  index: true,
                  columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
                  waitTime: 4000, //轮播时间间隔(ms)
                  align: ['center'],
                  carousel: 'page',
                };
                console.log(
                  'loadUnitTaskItems taskitemScrollTableConfig',
                  unit.taskitemScrollTableConfig,
                );

                //计算任务的完成情况、各任务大类的数量，用于赋值给任务统计图表显示
                //取消/终止任务数量
                let taskEndCount = 0x0;
                let filterTaskItems = res.filter((p) => p.hasend === true);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskEndCount = filterTaskItems.length;
                //未完成任务数量
                let taskNotFinishCount = 0x0;
                filterTaskItems = res.filter((p) => p.hasend === false && p.hasfinish === false);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskNotFinishCount = filterTaskItems.length;
                //已完成任务数量
                let taskFinishedCount = 0x0;
                filterTaskItems = res.filter((p) => p.hasend === false && p.hasfinish === true);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskFinishedCount = filterTaskItems.length;
                //自查类任务数量
                let taskCheckCount = 0x0;
                filterTaskItems = res.filter((p) => p.tasktype === 0x1);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskCheckCount = filterTaskItems.length;
                //设备维护保养类任务数量
                let taskEquipmentCount = 0x0;
                filterTaskItems = res.filter((p) => p.tasktype === 0x2);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskEquipmentCount = filterTaskItems.length;
                //隐患治理类任务数量
                let taskTroubleCount = 0x0;
                filterTaskItems = res.filter((p) => p.tasktype === 0x4);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskTroubleCount = filterTaskItems.length;
                //督查类任务数量
                let taskInspectCount = 0x0;
                filterTaskItems = res.filter((p) => p.tasktype === 0x8);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskInspectCount = filterTaskItems.length;
                //作业活动类任务数量
                let taskJobCount = 0x0;
                filterTaskItems = res.filter((p) => p.tasktype === 0x16);
                if (filterTaskItems && filterTaskItems.length > 0x0)
                  taskJobCount = filterTaskItems.length;

                let taskSeriesData0 = [];
                taskSeriesData0.push({ name: '未完成', value: taskNotFinishCount });
                taskSeriesData0.push({ name: '已完成', value: taskFinishedCount });
                taskSeriesData0.push({ name: '取消/终止', value: taskEndCount });
                let taskSeriesData1 = [];
                taskSeriesData1.push({ name: '自查类', value: taskCheckCount });
                taskSeriesData1.push({ name: '设备设施类', value: taskEquipmentCount });
                taskSeriesData1.push({ name: '隐患治理类', value: taskTroubleCount });
                taskSeriesData1.push({ name: '督查类', value: taskInspectCount });
                taskSeriesData1.push({ name: '作业活动类', value: taskJobCount });
                unitTaskStatisticsEchartsOption.series[0x0].data = taskSeriesData0;
                unitTaskStatisticsEchartsOption.series[0x1].data = taskSeriesData1;

                //更新任务Echarts图表数据
                unit.taskEchartsOption = unitTaskStatisticsEchartsOption;
                console.log('loadUnitTaskItems taskEchartsOption', unit.taskEchartsOption);
              } else {
                //单元没有任务项时，更新任务Echarts图表数据为初始数据
                unit.taskEchartsOption = unitTaskStatisticsEchartsOption;
              }
            })
            .catch((ex) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: ex,
                getContainer: () => document.body,
              });
            });
        }
      }

      /*
       * 加载指定时间段内指定单元的隐患治理集合；根据查询结果统计未派单、已派单、未治理、已整改数量
       */
      function loadUnitTroubleCorrects(unitid: string, begintm: string, endtm: string) {
        console.log('loadUnitTroubleCorrects unitid', unitid);
        if (unitid && ehsOrg && ehsOrg.orgcode) {
          //清空单元的隐患治理轮播表数据
          unit.troublecorrects = [];
          unit.troublecorrectScrollTableConfig = {
            header: ['本年整改治理隐患', '整改状态'],
            data: [['暂无任何整改治理隐患记录。']],
            index: true,
            columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
            align: ['center'],
            carousel: 'page',
          };
          //重置单元的隐患治理数量均为0
          unit.troublecorrectStsInfo = {
            count: 0x0,
            notDispathCount: 0x0,
            notCorrectCount: 0x0,
            notCheckCount: 0x0,
            hasCheckCount: 0x0,
          };
          //重置单元的隐患整改治理状态图表选项
          let unitTroubleCorrectStatusEchartsOption = {
            title: {
              text: '隐患整改状态统计',
              subtext: '',
              left: 'center',
              //标题文字大小和颜色保持与大屏基础色一致
              textStyle: {
                color: '#75d1f0',
                fontSize: '1.15rem',
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)',
            },
            legend: {
              show: false,
              left: 'center',
              top: 'bottom',
              data: ['隐患整改状态'],
            },
            toolbox: {
              show: false,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            color: ['#ffb79d', '#ffe68b', '#b7eaff', '#b1f2ae'],
            series: [
              {
                name: '隐患整改状态',
                type: 'pie',
                radius: [20, 40], //设置每个图形的大小
                center: ['50%', '50%'], //设置每个图形的中心点
                // roseType: 'radius',
                itemStyle: {
                  borderRadius: 5,
                },
                label: {
                  show: false,
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
                data: [
                  { value: 0x0, name: '未派单' },
                  { value: 0x0, name: '整改中' },
                  { value: 0x0, name: '整改完成' },
                  { value: 0x0, name: '已验收' },
                ],
              },
            ],
          };
          //构造查询单元隐患治理的查询条件：状态为全部
          let condition: EhsTroubleCorrectQueryConditionDto = {
            orgcode: ehsOrg.orgcode,
            unitid: unitid,
            status: '', //查询全部状态的隐患
            begintm: begintm,
            endtm: endtm,
          };
          queryEhsTroubleCorrectList(condition)
            .then((res) => {
              console.log('queryEhsTroubleCorrectList res', res);
              if (res && res.length > 0x0) {
                unit.troublecorrects = res;
                let scrollTableConfigData = [];
                //统计单元的隐患治理数量
                let count = res.length;
                let notDispathCount = 0x0;
                let notCorrectCount = 0x0;
                let notCheckCount = 0x0;
                let hasCheckCount = 0x0;
                res.forEach((item) => {
                  //状态进行格式化输出：'<span style="color:#32c5e9;">行2列2</span>'
                  let statusString = '整改中';
                  if (item.hasdispatch === true) {
                    statusString = '未派单';
                    notDispathCount++;
                  } else {
                    if (item.hascorrect === false) {
                      statusString = '整改中';
                      notCorrectCount++;
                    } else {
                      if (item.hascheck === false) {
                        statusString = '待验收';
                        notCheckCount++;
                      } else {
                        statusString = '已验收';
                        hasCheckCount++;
                      }
                    }
                  }
                  scrollTableConfigData.push([item.title, statusString]);
                });
                //数据变更时，请生成新的props，不然组件将无法刷新状态
                unit.troublecorrectScrollTableConfig = {
                  header: ['本年整改治理隐患', '整改状态'],
                  data: scrollTableConfigData,
                  index: true,
                  columnWidth: [50, 300, 80], //单位是px，宽度无法自适应
                  // columnWidth: ['10%', '75%', '15%'],
                  waitTime: 4000, //轮播时间间隔(ms)
                  align: ['center'],
                  carousel: 'page',
                };
                console.log(
                  'loadUnitTaskItems troublecorrectScrollTableConfig',
                  unit.troublecorrectScrollTableConfig,
                );

                //更新单元的隐患整改治理各状态数量
                unit.troublecorrectStsInfo = {
                  count: count,
                  notDispathCount: notDispathCount,
                  notCorrectCount: notCorrectCount,
                  notCheckCount: notCheckCount,
                  hasCheckCount: hasCheckCount,
                };
                //隐患整改治理专题Echart图表选项数据更新
                unitTroubleCorrectStatusEchartsOption.series[0x0].data = [
                  { value: notDispathCount, name: '未派单' },
                  { value: notCorrectCount, name: '整改中' },
                  { value: notCheckCount, name: '整改完成' },
                  { value: hasCheckCount, name: '已验收' },
                ];
                unit.troublecorrectStatusEchartsOption = unitTroubleCorrectStatusEchartsOption;
              } else {
                //单元没有隐患整改记录时，设置隐患整改状态echart图表选项为默认值
                unit.troublecorrectStatusEchartsOption = unitTroubleCorrectStatusEchartsOption;
              }
            })
            .catch((ex) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: ex,
                getContainer: () => document.body,
              });
            });
        }
      }

      /*
       * 加载指定时间段内指定单元的危险源辨识记录
       */
      function loadUnitHazardsIdentifyRecords(unitid: string, begintm: string, endtm: string) {
        console.log('loadUnitHazardsIdentifyRecords unitid', unitid);
        if (unitid && ehsOrg && ehsOrg.orgcode) {
          //清空单元的危险源辨识记录轮播表数据
          unit.hazardIdentifyScrollTableConfig = {
            header: ['名称', '辨识时间', '辨识结果'],
            data: [['暂无任何危险源辨识记录。']],
            index: true,
            columnWidth: [60, 350, 120, 120], //单位是px，宽度无法自适应
            align: ['center'],
            carousel: 'page',
          };
          //构造查询单元隐患治理的查询条件：状态为全部
          let condition: HazardIdentifyQueryConditionDto = {
            orgcode: ehsOrg.orgcode,
            unitid: unitid,
            begintm: begintm,
            endtm: endtm,
          };
          queryIdentifyRecordByUnit(condition)
            .then((res) => {
              console.log('queryIdentifyRecordByUnit res', res);
              if (res && res.length > 0x0) {
                let scrollTableConfigData = [];
                res.forEach((item) => {
                  //状态进行格式化输出：'<span style="color:#32c5e9;">行2列2</span>'
                  let statusString = '不存在';
                  //先判断确认辨识结果，如果没有进行确认显示辨识结果
                  if (item.hasconfirm === true && item.confirmresult) {
                    if (item.confirmresult === 0x1) statusString = '存在(第一类)';
                    else if (item.confirmresult === 0x2) statusString = '存在(第二类)';
                  } else if (item.identificationresult) {
                    if (item.identificationresult === 0x1) statusString = '存在(第一类)';
                    else if (item.identificationresult === 0x2) statusString = '存在(第二类)';
                  }
                  scrollTableConfigData.push([
                    item.title,
                    item.tm ? moment(item.tm).format('YYYY-MM-DD') : '',
                    statusString,
                  ]);
                });
                //数据变更时，请生成新的props，不然组件将无法刷新状态
                unit.hazardIdentifyScrollTableConfig = {
                  header: ['名称', '辨识时间', '辨识结果'],
                  data: scrollTableConfigData,
                  index: true,
                  columnWidth: [60, 350, 120, 120], //单位是px，宽度无法自适应
                  waitTime: 4000, //轮播时间间隔(ms)
                  align: ['center'],
                  carousel: 'page',
                };
                console.log(
                  'loadUnitHazardsIdentifyRecords hazardIdentifyScrollTableConfig',
                  unit.hazardIdentifyScrollTableConfig,
                );
              }
            })
            .catch((ex) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: ex,
                getContainer: () => document.body,
              });
            });
        }
      }

      /*
       * 加载指定时间段内指定单元的危险源风险评价记录
       */
      function loadUnitRiskEvaluationRecords(unitid: string, begintm: string, endtm: string) {
        console.log('loadUnitRiskEvaluationRecords unitid', unitid);
        if (unitid && ehsOrg && ehsOrg.orgcode) {
          //清空单元的风险评价记录轮播表数据
          unit.riskEvaluationScrollTableConfig = {
            header: ['名称', '评价时间', '评价人', '风险等级'],
            data: [['暂无任何风险评价记录。']],
            index: true,
            columnWidth: [60, 300, 120, 120, 120], //单位是px，宽度无法自适应
            align: ['center'],
            carousel: 'page',
          };
          //构造查询风险评价记录的查询条件
          let condition: HazardRiskEvaluationQueryConditionDto = {
            orgcode: ehsOrg.orgcode,
            unitid: unitid,
            begintm: begintm,
            endtm: endtm,
          };
          queryUnitRiskEvaluationRecords(condition)
            .then((res) => {
              console.log('queryUnitRiskEvaluationRecords res', res);
              if (res && res.length > 0x0) {
                let scrollTableConfigData = [];
                res.forEach((item) => {
                  //状态进行格式化输出：'<span style="color:#32c5e9;">行2列2</span>'
                  let riskString = '-';
                  if (item.risklevel === 0x1) riskString = '低风险';
                  else if (item.risklevel === 0x2) riskString = '一般风险';
                  else if (item.risklevel === 0x3) riskString = '较大风险';
                  else if (item.risklevel === 0x4) riskString = '重大风险';
                  scrollTableConfigData.push([
                    item.hazardname,
                    item.tm ? moment(item.tm).format('YYYY-MM-DD') : '',
                    item.byuser,
                    riskString,
                  ]);
                });
                //数据变更时，请生成新的props，不然组件将无法刷新状态
                unit.riskEvaluationScrollTableConfig = {
                  header: ['名称', '评价时间', '评价人', '风险等级'],
                  data: scrollTableConfigData,
                  index: true,
                  columnWidth: [60, 300, 120, 120, 120], //单位是px，宽度无法自适应
                  waitTime: 4000, //轮播时间间隔(ms)
                  align: ['center'],
                  carousel: 'page',
                };
                console.log(
                  'loadUnitRiskEvaluationRecords riskEvaluationScrollTableConfig',
                  unit.riskEvaluationScrollTableConfig,
                );
              }
            })
            .catch((ex) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: ex,
                getContainer: () => document.body,
              });
            });
        }
      }

      /*
       * 重置地图中的选中对象和信息显示区域，设置地图选中对象为null、所有信息显示区域均不显示
       */
      function resetMapSelectedAndInfoArea() {
        //点击地图底图geo3D图层中的对象或者地图显示区域外，设置选中对象为空
        mapLayerOptions.selectedObjectLayerName = '';
        mapLayerOptions.selectedObjectId = '';
        mapLayerOptions.selectedObject = null;
        //点击地图中的其他区域表示不选中任何对象，设置叠加信息显示区域的状态
        if (ehsOrg) frontAreaState.showInSystemTitleObjectName = ehsOrg.orgname;

        //组织的最新安全状态显示控制不进行重置，原来显示的依旧显示
        // frontAreaState.showTopCenter = false;
        // frontAreaState.showOrgInfo = false;

        frontAreaState.showLeftSide = false;
        frontAreaState.showRightSide = false;
        frontAreaState.showBottomCenter = false;
        frontAreaState.showUnitInfo = false;
        frontAreaState.showUnitHazardsInfo = false;
        frontAreaState.showUnitHiddenTroublesInfo = false;
        frontAreaState.showUnitTaskInfo = false;
        console.log('resetMapSelectedAndInfoArea mapLayerOptions', mapLayerOptions);
        console.log('resetMapSelectedAndInfoArea frontAreaState', frontAreaState);
      }

      /*
       * 设置html的root节点字号
       */
      const setRootFontSize = () => {
        /* 获取布局视口的宽度，也就是浏览器宽度*/
        let width = document.documentElement.clientWidth;
        /* 经过换算，动态计算不同设备的font-size值 1080p计算为11.25 */
        let size = (width / 1920) * 20;
        /* 设置 html的font-size属性*/
        document.documentElement.style.fontSize = size + 'px';
        /* 必须设置在body上，设置在html中无效*/
        document.getElementsByTagName('body')[0].style.fontSize = size + 'px';
        // 调试获取设置值并输出
        let getBodyFontSize = document.getElementsByTagName('body')[0].style.fontSize;
        console.log(
          'body width=' + width + ' font_size=' + size + ' getBodyFontSize=' + getBodyFontSize,
        );
      };

      window.onresize = () => {
        setRootFontSize();
        //在窗口大小变化时同时对echarts的图形显示区域大小进行调整，以保证图表显示最大
        mapContainer.resize();
        //如无法自动调整可以获取外层容器的宽度和高度进行显示设置
        // 获取新的窗口尺寸（这里以容器的尺寸为例）
        // var container = document.getElementById('main');
        // var width = container.clientWidth;
        // var height = container.clientHeight;
        // 重新计算 ECharts 图表的尺寸（这里直接使用容器的尺寸）
        // 注意：如果需要减去边距等，可以在这里进行计算
        // 调用 ECharts 的 resize 方法，应用新的尺寸到图表上
        // mapContainer.resize({
        //     width: width,
        //     height: height
        // });
      };

      onBeforeMount(() => {
        //页面加载时设置一次root节点的字号
        setRootFontSize();
      });

      onMounted(() => {
        //启动显示当前时间的定时器
        datetimeInterval.value = setInterval(updateCurrentDateTime, 500);

        //初始化地图
        //2025-6-29，实际使用dom元素设置id，不通过ref方式最终发布线上版本在后台管理和大屏页面切换时地图无法正常显示
        // mapContainer = echarts.init(document.getElementById('echartsMap3dContainerId'));
        mapContainer = echarts.init(echartsMap3dContainerRef.value);
        //指定行政区划编码进行地图注册
        //获取组织信息参数中的行政区划信息进行加载，如果组织信息中没有行政区划信息弹出错误提示信息
        //获取用户所在组织机构信息
        getUserOrganization(projectCode.value)
          .then((res) => {
            ehsOrg = res;
            console.log('getUserOrganization res', res);
            //获取组织参数中的geo节点，获取其中的行政区划编码和名称
            let orgAdcd = '';
            let orgAdnm = '';
            if (res) {
              mapLayerOptions.initOrgCode = res.orgcode;
              mapLayerOptions.initOrgName = res.orgname;

              if (res.params) {
                //如果params不为空，将其转换为json对象
                let ehsOrgParam = JSON.parse(res.params);
                if (ehsOrgParam && ehsOrgParam.geo) {
                  orgAdcd = ehsOrgParam.geo.adcode;
                  orgAdnm = ehsOrgParam.geo.adname;
                }
              }
            }

            //判断如果获取组织参数中的行政区划信息为空进行提示
            if (!orgAdcd) {
              //为空，弹出提示信息；加载中国地图作为默认底图
              // createErrorModal({
              //   title: t('sys.api.errorTip'),
              //   content: '当前组织没有配置geo信息，无法进行对应地图的加载。',
              //   getContainer: () => document.body,
              // });
              notification.error({
                message: t('数据错误'),
                description: `当前组织没有配置geo信息，无法进行对应地图的加载。`,
                duration: 5,
              });
              //加载中国地图作为默认
              initMap('china', '100000');
            } else {
              //不为空，根据行政区划编码和名称进行地图加载
              //对基本信息赋值
              mapLayerOptions.initAdcd = orgAdcd;
              mapLayerOptions.initAdnm = orgAdnm;
              mapLayerOptions.showAdname = true;
              //初始化地图
              initMap(orgAdnm, orgAdcd);

              //地图加载后显示单元分布，采用延迟加载(如果不延迟可能initMap尚未执行完成，对地图操作无效)
              setTimeout(() => {
                onMapUnitLayerButtonClick();
              }, 500);

              //加载组织的最新安全状态
              setTimeout(() => {
                loadOrgLatestStatus();
              }, 500);
            }
          })
          .catch((ex) => {
            createErrorModal({
              title: t('sys.api.errorTip'),
              content: ex,
              getContainer: () => document.body,
            });
          });

        //echarts官网写法
        //       mapContainer.dispatchAction({
        //   type: 'downplay',
        //   seriesIndex: 0,
        //   dataIndex: currentIndex
        // });

        //在地图中注册鼠标点击事件
        mapContainer.off('click');
        // mapContainer.getZr().off('click');//使用该行代码关闭click事件会导致地图的click事件失效
        //2025-6-4，实测使用getZr()的click事件可以获取地图中的包含geo3D图层在内的点击事件
        //2个click事件为不同事件，getZr()的click事件只能获取点击的位置，不能获取点击的图层中的对象
        mapContainer.on('click', (params) => {
          //地图底图通过geo3D设置，没有在series中，在底图上点击时不触发click事件
          console.log('mapContainer click params', params);
          //通过geo3D设置的地图底图在点击时无法获取params，此时console中会you有警告，获取series中的数据正常
          if (!params) return; //2025-5-30，实测无效
          //由于地图中有多个series，在同一个位置点击时有可能会触发多个series对象的点击，需要再次做防抖处理
          if (mapLayerOptions.isClicking === true)
            //根据标记判断，如果已经在点击中，本次不进行处理；设置300毫秒后再响应点击处理事件
            return;
          mapLayerOptions.isClicking = true;
          //设置300毫秒后重置标记，避免后续点击无法触发事件响应
          setTimeout(() => {
            mapLayerOptions.isClicking = false;
          }, 300);
          console.log('mapContainer click', params);

          // 根据不同的图层进行点击事件处理，可以根据seriesName、seriesType进行不同的格式化显示
          //如果鼠标点击的地图点上有多个series中的数据，同时会触发多个series的事件；需要根据图层的优先级来显示（最后显示行政区划底图信息）；
          //如果已经在对应的图层完成点击事件处理，使用return进行返回不继续进行后续的判断处理；
          if (params.componentType === 'series') {
            console.log('mapContainer click series', params.seriesName);
            //点击的是series，根据图层name分别进行处理
            if (
              params.seriesName === mapLayerUnitName.value ||
              params.seriesName === mapLayerHazardName.value ||
              params.seriesName === mapLayerTroubleName.value ||
              params.seriesName === mapLayerTaskName.value
            ) {
              //单元图层，鼠标点击时显示单元静态信息、任务信息、隐患信息
              //危险源图层，鼠标点击时显示单元的危险源台账、辨识记录、风险评价记录
              //隐患图层，鼠标点击时显示单元的隐患台账、隐患治理整改记录
              console.log('mapContainer click params.data', params.data);
              const unitDto: EhsUnitDto = params.data.property;
              //设置当前点击选中的单元
              mapLayerOptions.selectedObjectLayerName = params.seriesName;
              mapLayerOptions.selectedObjectId = unitDto.unitid;
              mapLayerOptions.selectedObject = unitDto;
            } else if (params.seriesName === mapLayerCameraName.value) {
              //如果点击的是摄像头图层，设置选中对象为对应的摄像头信息，在查询数据中打开摄像头画面窗口
              const cameraDto: CameraDto = params.data.property;
              mapLayerOptions.selectedObjectLayerName = params.seriesName;
              mapLayerOptions.selectedObjectId = cameraDto.id;
              mapLayerOptions.selectedObject = cameraDto;
            } else if (params.seriesName === mapLayerStaffName.value) {
              //如果点击的是人员签到图层，不设置选中对象信息，暂时没有对应的人员信息显示处理
              // 设置选中的对象为空
              mapLayerOptions.selectedObjectLayerName = '';
              mapLayerOptions.selectedObjectId = '';
              mapLayerOptions.selectedObject = null;
            }

            //获取series中选中的对象后进行对应数据的查询
            getSelectedObjectInfo();

            //行政区划底图，在通过series设置地图的底图时需要进行判断处理，通过geo3D设置底图时不会触发
            if (params.seriesName === 'map-ad') {
              // 设置选中的对象为空
              mapLayerOptions.selectedObjectLayerName = '';
              mapLayerOptions.selectedObjectId = '';
              mapLayerOptions.selectedObject = null;
              const { adcode, name, level } = params.data;
              console.log('mapContainer click map-ad', params.data);
              //可以设置点击加载该行政区划的地图
              //根据层级判断，只有在层级为省"province"、市"city"可以加载对应的地图，在层级为区县"district"无法加载
              if (level == 'province' || level == 'city') initMap(name, adcode);
              else
                notification.info({
                  message: t('无效操作'),
                  description: `当前地图层级太小，无对应地图进行加载。`,
                  duration: 2,
                });
              return;
            }
            if (params.seriesType == 'bar3D') {
              console.log('mapContainer click seriesType=bar3D', params.data);
              // return [
              //   params.seriesName,
              //   params.name + '：' + params.value[2] + (params.value[3] || ''),
              // ].join('<br />');
              return;
            }
          } else {
            //点击的不是series，设置选中对象为null
            //其他图层点击事件，设置选中的对象为空
            resetMapSelectedAndInfoArea();
            console.log('mapContainer click others', params.data);
          }
        });

        mapContainer.getZr().on('click', (params) => {
          //延迟100ms判断是否进入click的事件处理，如果进入到click的事件处理表示点击的是series中的对象（在click事件中处理）；否则就是本事件中处理（表示点击的是地图底图或其他空白区域）
          setTimeout(() => {
            if (mapLayerOptions.isClicking === true) {
              //已经在click事件中处理，本事件中不进行处理
              console.log(
                'mapContainer.getZr() click 直接在click事件中处理，本事件中不重复处理',
                params,
              );
              return;
            } else {
              //没有在click事件中处理，在本事件中进行处理
              console.log('mapContainer.getZr() click params', params);
              //点击地图底图geo3D图层中的对象或者地图显示区域外，设置选中对象为空
              resetMapSelectedAndInfoArea();
            }
          }, 100);
        });
        //实测无georoam事件
        // mapContainer.on('georoam', (params) => {
        //   console.log('map3d georoam', params);
        // });
        //在地图中统一处理缩放
        //georoam是针对2d地图，不适用于3D地图；3D地图使用map3dRoam事件，实测也没有该事件
        // mapContainer.off('map3dRoam');
        // mapContainer.on('map3dRoam', (e) => {
        //   console.log('map3d map3dRoam', e);
        //   if (e.componentType === 'series') {
        //     const myOption = mapContainer.getOption();
        //     myOption.geo[0].zoom = myOption.series[0].zoom;
        //     myOption.geo[0].center = myOption.series[0].center;
        //     myOption.geo[1].zoom = myOption.series[0].zoom;
        //     myOption.geo[1].center = myOption.series[0].center;
        //     myOption.geo[2].zoom = myOption.series[0].zoom;
        //     myOption.geo[2].center = myOption.series[0].center;
        //     mapContainer.setOption(myOption);
        //   }
        // });
        //实测无geoselectchanged事件
        // mapContainer.on('geoselectchanged', (params) => {
        //   console.log('map3d geoselectchanged', params);
        // });
      });

      onUnmounted(() => {
        //页面卸载时清空或重置地图对象
        mapContainer = null;

        clearInterval(datetimeInterval.value);
      });

      return {
        echartsMap3dContainerRef,
        enter,
        toggle,
        exit,
        isFullscreen,
        currentDate,
        currentTime,
        currentWeek,
        mapLayerOptions,
        frontAreaState,
        mapLayerUnitName,
        mapLayerHazardName,
        mapLayerTroubleName,
        mapLayerTaskName,
        mapLayerStaffName,
        mapLayerCameraName,
        unit,
        orgOrUnitLatestStatus,
        updateCurrentDateTime,
        onNavigatorBarItemClick,
        onResetMapButtonClick,
        onChangeMapViewControlButtonClick,
        onMapShowAdnameButtonClick,
        onMapUnitLayerButtonClick,
        onMapHazardLayerButtonClick,
        onMapTroubleLayerButtonClick,
        onMapTaskLayerButtonClick,
        onMapStaffLayerButtonClick,
        onMapCameraLayerButtonClick,
        onAIChatButtonClick,
        onMapTestButtonClick,
        onBackToChinaButtonClick,
        onMapTaskLayerMenuClick,
        onViewUnitPanoramaButtonClick,
        onViewUnitVideoStaticInfoButtonClick,
        getImageFileUrlPrefix,
        registerUnitPanoramaViewModal,
        registerUnitVideoViewModal,
        registerLivePlayerModal,
        registerAIChatDrawer,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import './datav.less';
</style>
